道具在reactjs中没有正确的数据

Question

我使用 firebase 数据库，并将该数据库中的数据转换为 JSON 格式。有了这些数据，我正在使用地图函数，我想将我的数据渲染到其他组件中。我的代码如下所示。第一个组件

function Products() { 

const [url, setUrl] = useState([]);

useEffect(() => {

    async function asyncCall() {

        const myurl = await axios.get("i put a example link here:mydata.json")

            setUrl(myurl.data)

    }

    asyncCall();

},[]);

return (

    <Row>

        {url.map((url => (

                <Col key={url.id} sm={12} md={6} lg={4} xl={3}>

                    <Bags url={url} />

                </Col>    

                )

        ))}

    </Row>

)

}

我想要渲染数据的第二个组件

function Bags(props) { 

return (

    <Row>

        <CardDeck>

            <Col sm={14} md={8} lg={6}>

                <Card className='my-3 p-3 rounded'>

                    {

                    props.url ? (

                        <div>

                            <Card.Img variant="top" src={ props.url.img || 'holder.js/100px160'} />

                            <Card.Body>

                                <Card.Title> {props.url.name} </Card.Title>

                                <Card.Text>

                                This is the greatest albums of rock band Pearl Jam according to Nikolas

                                </Card.Text>

                            </Card.Body>

                        </div>

                    ) : (

                        <div className="myprogress">

                            <CircularProgress color="secondary" />

                        </div>

                        )

                    }

                </Card>

            </Col>

        </CardDeck>

    </Row>

    

                       

)

}

对于第二个组件，我想根据我拥有的数据数量生成 Bootstrap-React 卡的数量。例如，如果我的 JSON 文件中有 6 个元素，我希望在第二个组件中生成 6 个 React-bootstrap 卡并为每个卡打印一些信息，例如名称。通过上面的代码，我完成了传递道具，但 console.log 的道具不是我的数据。这就是我在控制台中得到的内容

console.log(props)

谁能告诉我如何正确传递我的数据或建议更好的方法来做到这一点。我希望我的问题能被理解。我可以提供任何人想要的更多信息

Answer 1

我认为这就是您想要实现的目标：function Products() {&nbsp; const [url, setUrl] = useState([]);&nbsp; useEffect(() => {&nbsp; &nbsp; async function asyncCall() {&nbsp; &nbsp; &nbsp; const myurl = await axios.get("i put a example link here:mydata.json");&nbsp; &nbsp; &nbsp; setUrl(myurl.data);&nbsp; &nbsp; }&nbsp; &nbsp; asyncCall();&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <Row>&nbsp; &nbsp; &nbsp; {/*{ {url.map((url => (&nbsp; */}&nbsp; &nbsp; &nbsp; {/* the url in the arrow function was shadowing the url array that you were trying to pass to the bags componenet */}&nbsp; &nbsp; &nbsp; <Col key={url.id} sm={12} md={6} lg={4} xl={3}>&nbsp; &nbsp; &nbsp; &nbsp; <Bags url={url} />&nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; {/*&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; */}&nbsp; &nbsp; </Row>&nbsp; );}function Bags(props) {&nbsp; return (&nbsp; &nbsp; <Row>&nbsp; &nbsp; &nbsp; <CardDeck>&nbsp; &nbsp; &nbsp; &nbsp; <Col sm={14} md={8} lg={6}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card className="my-3 p-3 rounded">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {props.url.length > 0 ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; props.url.map((el) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="top"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={el.img || "holder.js/100px160"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Title> {el.name} </Card.Title>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; This is the greatest albums of rock band Pearl Jam&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; according to Nikolas&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card.Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="myprogress">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CircularProgress color="secondary" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; </CardDeck>&nbsp; &nbsp; </Row>&nbsp; );}您能确认结果吗？

Answer 2

我几乎用这个实现解决了问题function Bags() {&nbsp;const [url, setUrl] = useState([]);//const [myfinal,setFinal] = useState([]);useEffect(() => {&nbsp; &nbsp; async function asyncCall() {&nbsp; &nbsp; &nbsp; &nbsp; const myurl = await axios.get("https://mysiteproject-8adcf.firebaseio.com/products.json")&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setUrl(myurl.data)&nbsp; &nbsp; }&nbsp; &nbsp; asyncCall();},[]);if (url) {&nbsp; &nbsp; //let myvar = url;&nbsp; &nbsp; //console.log(myvar.img);&nbsp; &nbsp; //console.log(myvar);&nbsp; &nbsp; url.map((url) => console.log(url.img));}//console.log()return (&nbsp; &nbsp; <Row>&nbsp; &nbsp; &nbsp; &nbsp; <CardDeck>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col sm={14} md={8} lg={6}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card className='my-3 p-3 rounded'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {url.length > 0 ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url.map((el) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; variant="top"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src={el.img || "holder.js/100px160"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Title> {el.name} </Card.Title>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Card.Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; This is the greatest albums of rock band Pearl Jam&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; according to Nikolas&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card.Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card.Body>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="myprogress">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <CircularProgress color="secondary" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp; &nbsp; &nbsp; </CardDeck>&nbsp; &nbsp; </Row>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;)}我不知道这个实现是否是最佳的

Answer 3

试试这个并告诉我是否有效import React, { useEffect, useState } from "react";import axios from "axios";import "./styles.css";export default function App() {&nbsp; const [url, setUrl] = useState([]);&nbsp; useEffect(() => {&nbsp; &nbsp; async function asyncCall() {&nbsp; &nbsp; &nbsp; const response = await fetch(&nbsp; &nbsp; &nbsp; &nbsp; "https://mysiteproject-8adcf.firebaseio.com/products.json"&nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; &nbsp; const responseJson = await response.json();&nbsp; &nbsp; &nbsp; console.log(responseJson);&nbsp; &nbsp; &nbsp; setUrl(responseJson);&nbsp; &nbsp; }&nbsp; &nbsp; asyncCall();&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; {url.map((url => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Col key={url.id} sm={12} md={6} lg={4} xl={3}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Bags url={url} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Col>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );}