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

我正在导入一些模拟数据，这些数据在中以数组形式组织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>