reactjs - 将道具传递给子组件不起作用
问题描述
我正在进行 axios 调用并接收一些数据,数据如下数据是 json 对象数组
[
{
"like": 5,
"_id": "608822d2c6d24d5a2c9b203e",
"author": "vineeth",
"punch": "punch1",
"__v": 0
},
{
"like": 11,
"_id": "608977a366625258dc62a704",
"author": "vineeth nice boy",
"punch": "punch by vineeth",
"__v": 0
}
]
我在数据数组上循环,并使用 map 将每个数据元素发送到子组件,它预期会呈现这个数据。但我无法在子组件中查看/显示数据。
家长
import { useSelector} from 'react-redux';
import Punch from './punch/Punch'
import './Punches.css';
const Punches = ()=> {
const punches = useSelector((state)=> state.punches);
console.log(punches);
return (
<div className="Punches">
<div className="card-group">
{
punches.map((punch)=>{
<Punch punch={punch}></Punch>
})
}
</div>
</div>
);
}
export default Punches;
孩子
import './Punch.css';
const Punch = ({punch})=> {
console.log(punch);
return (
<div className="Punch">
<h1>{punch}</h1>
</div>
)
}
export default Punch;
解决方案
推荐阅读
- python - 我的 CSV 文件未分配给字典中的正确键
- c++ - 如何将矢量元素链接到指针
- python - 使用 matplotlib 在两个子图上的条形之间添加空间
- python - 如何从 Pandas Dataframe 中提取多个数字
- c++ - 使用模板在 C++ 中编译排序的链接列表对象/类时链接器命令失败
- asp.net-core-webapi - .NET Core 3.1 WebAPI IISExpress 在调试时挂起
- r - 导入数据时出现数字错误
- java - Android Studio:房间中的插入功能未正确存储实体
- php - Live Server 无法加载其他页面并出现 Apache 404 错误
- reactjs - 反应:尝试用 src/ 镜像 __tests__/