值未显示在表中

Question

我正在尝试通过循环使用道具中接收到的数据来填充表格。但是数据没有在 UI 中呈现 :(，如果我手动放置它显示的任何数据。以下是我的代码

要填充的代码

{props.uiProductCart.forEach((data) => {
           
            <tr 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>;
          })}

Answer 1

没有完整的代码示例，很难确定我的答案是否完整。
但是，首先我认为第一行中的forEach 应该是map。

forEach

forEach() 方法对每个数组元素执行一次提供的函数。

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

map

map() 方法创建一个新数组，其中填充了对调用数组中的每个元素调用提供的函数的结果。

来源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

换句话说，forEach 函数不会返回任何要由 react 渲染的内容。它只是循环一个集合，构建你的模板然后丢弃它。 而map 函数将返回构造的模板以进行反应，以进行渲染。

这里的官方 React 文档也演示/记录了这一点：
https://reactjs.org/docs/lists-and-keys.html

示例

我以code sandbox 为例。

注意：括号！

在将forEach 替换为map 时，请确保使用正确的括号。

以下两个都可以，因为 map 函数没有返回任何内容：

{props.uiProductCart.map((data) => {
  return (
    <tr data-index={data.srno}>
      ...
    </tr>
  );
})}

{props.uiProductCart.map((data) => (
  <tr data-index={data.srno}>
    ...
  </tr>
))}

但这将不工作：

{props.uiProductCart.map((data) => {
    <tr data-index={data.srno}>
      ...
    </tr>
})}