将道具传递给子组件不起作用

Question

我在进行 axios 调用并接收到一些数据，数据如下data is array of json objects

[
  {
    "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;

Answer 1

您的代码应该是：

{
  punches.map((punch) => (<Punch key={punch._id} punch={punch}></Punch>))
}

如果为箭头函数添加花括号 {}，则必须显式返回。

和

<div className="Punch">
  <h1>{punch.punch}</h1>
</div>

这里的 punch 是一个 JS 对象，react 不知道如何整体渲染它。