道具在reactjs中没有正确的数据
我使用 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)
谁能告诉我如何正确传递我的数据或建议更好的方法来做到这一点。我希望我的问题能被理解。我可以提供任何人想要的更多信息
慕的地62643123回答
-
回首忆惘然
我认为这就是您想要实现的目标：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> );}您能确认结果吗？ -
一只甜甜圈
我几乎用这个实现解决了问题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> )}我不知道这个实现是否是最佳的 -
莫回无
试试这个并告诉我是否有效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> );}
随时随地看视频慕课网APP
相关分类
JavaScript