通过props传值循环渲染表格时数据不展示，手动输入数据可正常显示

问题原因 #

你使用了forEach方法遍历数组生成表格行，forEach仅负责遍历执行回调逻辑，没有返回值，因此你在回调内部定义的<tr>元素没有被传递到JSX渲染层，所以UI不会显示对应的表格内容。手动写静态内容可以正常渲染，是因为这部分内容直接传递到了渲染层，不需要依赖遍历方法的返回值。

修复方案 #

将forEach替换为map方法，map会把每一轮回调的返回值收集为新数组返回，JSX可以直接渲染JSX元素组成的数组。同时需要为列表根元素<tr>添加唯一的key属性，符合React列表渲染规范，避免控制台抛出警告。

修复后代码如下：

{props.uiProductCart.map((data) => (
  <tr key={data.srno} data-index={data.srno}>
    <td>{data.srno}</td>
    <td>{data.name}</td>
    <td>{data.price}</td>
    <td>{data.quantity}</td>
    <td>{data.total}</td>
    <td>
      <BtnDelete title="Remove" />
    </td>
  </tr>
))}

如果习惯使用带大括号的回调写法，需要手动添加return返回<tr>元素：

{props.uiProductCart.map((data) => {
  return (
    <tr key={data.srno} data-index={data.srno}>
      <td>{data.srno}</td>
      <td>{data.name}</td>
      <td>{data.price}</td>
      <td>{data.quantity}</td>
      <td>{data.total}</td>
      <td>
        <BtnDelete title="Remove" />
      </td>
    </tr>
  )
})}

如果替换后仍无内容渲染，可以在遍历前打印props.uiProductCart确认传入的数组是否为空、数据格式是否符合预期。

内容的提问来源于stack exchange，提问作者Sumit