Javascript 如何使用一个组件渲染值数组
在下面的代码中，我使用多个相同的卡组件将“一般福利”、“旅行指南”、“医疗指南”、“租赁指南”四个部分硬编码到卡中。现在我使用了一个类别数组来保存这四个元素，并尝试通过使用一个卡片组件而不是一次又一次地为每个元素创建卡片来将它们从数组渲染到卡片上。简而言之，当新信息被添加到类别数组中时，我试图提高代码的可重用性。我怎样才能做到这一点Javascript 如何使用一个组件渲染值数组,javascript,reactjs,Javascript,Reactjs,在下面的代码中，我使用多个相同的卡组件将“一般福利”、“旅行指南”、“医疗指南”、“租赁指南”四个部分硬编码到卡中。现在我使用了一个类别数组来保存这四个元素，并尝试通过使用一个卡片组件而不是一次又一次地为每个元素创建卡片来将它们从数组渲染到卡片上。简而言之，当新信息被添加到类别数组中时，我试图提高代码的可重用性。我怎样才能做到这一点 const WelfarePage = (props) => { const [category, setCategory] = useState([
const WelfarePage = (props) => {
const [category, setCategory] = useState([]);
const [post,setPost] = useState([]);
useEffect(() => {
axios.get(`http://usccgsa.com:8080/post/category/welfare/all`)
.then(res =>{
setCategory(res.data)
})
.catch(err => {
console.log(err)
})
},[])
useEffect(()=>{
console.log('category',category)
if (category.length !==0){
for (var i = 0; i < category.length; i++) {
var catId = category[i].categoryId
axios.get(`http://usccgsa.com:8080/post/cat`+catId)
.then(res1 =>{
setPost(post =>[...post,res1.data])
})
.catch(err1 => {
console.log(err1)
})
}
}
},[category])
useEffect(()=>{
if (post.length!==0 && category.length!==0){
console.log('post is',post)
}
},[post])
return (
<section id="blog">
<div className="page-title">
<h1>welfare pagee</h1>
</div>
<Container className="blog">
<Container>
<Row>
<Col md="3">
<Accordion defaultActiveKey="0">
<Card>
<Accordion.Toggle as={Card.Header} variant="link" eventKey="0">
general welfare
</Accordion.Toggle>
<Accordion.Collapse eventKey="0">
<Card.Body>
<li value={1} onClick={e => setId(e.target.value)}>lugguage info</li>
<hr/>
<li value={2} onClick={e => setId(e.target.value)}>flight info</li>
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle as={Card.Header} variant="link" eventKey="1">
travel guide
</Accordion.Toggle>
<Accordion.Collapse eventKey="1">
<Card.Body>
<li value={3} onClick={e => setId(e.target.value)}>let's go to vegas</li>
<hr/>
<li value={4} onClick={e => setId(e.target.value)}>travel with parents</li>
<hr/>
<li value={5} onClick={e => setId(e.target.value)}>christmas plan</li>
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle as={Card.Header} variant="link" eventKey="2">
medical guide
</Accordion.Toggle>
<Accordion.Collapse eventKey="2">
<Card.Body>
<li value={6} onClick={e => setId(e.target.value)}>save $600 in 15mins</li>
</Card.Body>
</Accordion.Collapse>
</Card>
<Card>
<Accordion.Toggle as={Card.Header} variant="link" eventKey="3">
rental guide
</Accordion.Toggle>
<Accordion.Collapse eventKey="3">
<Card.Body>
<li value={7} onClick={e => setId(e.target.value)}>great deal around neighborhood</li>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</Col>
<Col md="9">
<div className="blog-item">
<div className="blog-content">
<Post postUrl={post.postUrl}/>
</div>
</div>
</Col>
</Row>
</Container>
</Container>
</section>
);
}
const福利页=（道具）=>{
const[category，setCategory]=useState（[]）；
const[post，setPost]=useState（[]）；
useffect（（）=>{
axios.get(`http://usccgsa.com:8080/post/category/welfare/all`)
。然后（res=>{
设置类别（资源数据）
})
.catch（错误=>{
console.log（错误）
})
},[])
useffect（（）=>{
console.log（'category'，category）
如果（category.length！==0）{
对于（变量i=0；i{
setPost（post=>[…post，res1.data]）
})
.catch（err1=>{
console.log（err1）
})
}
}
}，[类别]）
useffect（（）=>{
if（post.length！==0&&category.length！==0）{
console.log（'post is'，post）
}
}，[张贴]）
返回(
福利页
一般福利
setId（e.target.value）}>lugguage信息
setId（e.target.value）}>flight info
旅游指南
setId（e.target.value）}>我们去维加斯吧
setId（e.target.value）}>与父母一起旅行
setId（e.target.value）}>圣诞计划
医疗指南
setId（e.target.value）}>在15分钟内节省$600
租赁指南
setId（e.target.value）}>附近的很多地方
);
}
const CARDS\u数据=[
{
标题：“一般福利”，
项目：[
{
文本：“行李信息”，
价值：1
},
{
文本：“航班信息”，
价值：2
}
]
},
{
标题：“旅游指南”，
项目：[
{
短信：“我们去维加斯吧”，
价值：3
},
{
文字：“与父母同行”，
价值：4
},
{
文字：“圣诞计划”，
价值：5
}
]
}
]const福利页=（道具）=>{
const[category，setCategory]=useState（[]）；
const[post，setPost]=useState（[]）；
useffect（（）=>{
axios.get(`http://usccgsa.com:8080/post/category/welfare/all`)
。然后（res=>{
设置类别（资源数据）
})
.catch（错误=>{
console.log（错误）
})
}, [])
useffect（（）=>{
console.log（'category'，category）
如果（category.length！==0）{
对于（变量i=0；i{
setPost（post=>[…post，res1.data]）
})
.catch（err1=>{
console.log（err1）