table 中未显示值

Question

我正在尝试通过遍历它来使用 props 中接收到的数据来填充 table。但是数据没有在 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

The forEach() method executes a provided function once for each array element.

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

map

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

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

换句话说，forEach 函数不会 return 任何由 React 渲染的东西。它只是循环遍历一个集合，构建您的模板，然后丢弃它。 map 函数将 return 构建的模板做出反应，进行渲染。

这也是 demonstrated/documented 官方 React 文档中的此处：
https://reactjs.org/docs/lists-and-keys.html

例子

我设置了一个code sandbox作为示例。

注意：括号！

确保在用 map 替换 forEach 时使用正确的括号。

以下两个都可以工作，因为 map 函数没有 returning 任何东西：

{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>
})}

table 中未显示值

Value not showing in the table

html

typescript

next.js

react-props

例子

注意：括号！