道具在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() {

  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 => (  */}

      {/* the url in the arrow function was shadowing the url array that you were trying to pass to the bags componenet */}

      <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.length > 0 ? (

              props.url.map((el) => (

                <div>

                  <Card.Img

                    variant="top"

                    src={el.img || "holder.js/100px160"}

                  />

                  <Card.Body>

                    <Card.Title> {el.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>

  );

}

您能确认结果吗？

Answer 2

我几乎用这个实现解决了问题

function Bags() { 

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

//const [myfinal,setFinal] = useState([]);

useEffect(() => {

    async function asyncCall() {

        const myurl = await axios.get("https://mysiteproject-8adcf.firebaseio.com/products.json")

            setUrl(myurl.data)

    }

    asyncCall();

},[]);

if (url) {

    //let myvar = url;

    //console.log(myvar.img);

    //console.log(myvar);

    url.map((url) => console.log(url.img));

}

//console.log()

return (

    <Row>

        <CardDeck>

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

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

                {url.length > 0 ? (

          url.map((el) => (

            <div>

              <Card.Img

                variant="top"

                src={el.img || "holder.js/100px160"}

              />

              <Card.Body>

                <Card.Title> {el.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>

    

                       

)

}

我不知道这个实现是否是最佳的

Answer 3

试试这个并告诉我是否有效

import React, { useEffect, useState } from "react";

import axios from "axios";

import "./styles.css";

export default function App() {

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

  useEffect(() => {

    async function asyncCall() {

      const response = await fetch(

        "https://mysiteproject-8adcf.firebaseio.com/products.json"

      );

      const responseJson = await response.json();

      console.log(responseJson);

      setUrl(responseJson);

    }

    asyncCall();

  }, []);

  return (

    <div>

      {url.map((url => (

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

                    <Bags url={url} />

                </Col>    

                )

        ))}

    </div>

  );

}