javascript - Prop 的条件渲染(无需重新渲染)

Question

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

但是，在下面的示例中，导入 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>

这是一个没有 props 的 TableComponent，里面有一个文本:productData={productData}。您可能想要:

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