Question

我正在导入一些模拟数据，这些数据以productData.js中的数组形式组织。这是作为道具传递给TableComponent的。但是，如果不使用条件渲染（props.productData && ...），则会得到Cannot read property 'map' of undefined。根据我的阅读，这是因为render在异步接收道具之前被调用。

但是，在下面的示例中，导入productData时将重新渲染页面。我已经检查了React Developer Tool，TableComponent确实包含props.ProductData，这正是我所期望的数组。

为什么页面不重新呈现数据？

import productData from './productData.js'
...
const MainBody = () => {
  return (
    <TableComponent>
      productData={productData}
    </TableComponent>
  );
}

const TableComponent = props => { 
  const rows = props.productData && props.productData.map((row, index) => {
    return (
      <tr>
        <row>{row}</row>
      </tr>
    );
  });
  return <tbody>{rows}</tbody>

Answer 1

<TableComponent>
  productData={productData}
</TableComponent>

这是一个没有道具的TableComponent，并且里面有一个文字productData={productData}。您可能想要：

<TableComponent productData={productData} >
</TableComponent>

有条件的道具渲染（不重新渲染）

1 个答案: