Question

我正在导入像import productData from './productData.js'这样的对象数组。

productData.js如下所示：

var productData = [{}, {}, ...]
module.exports = {productData}

但是，现在在组件表达式TableComponent中要映射到数组，我必须以productData.productData的身份对其进行访问。为什么会这样？

const MainBody = () => {
  return (
    <TableComponent productData={productData.values}> </TableComponent>
  );
}

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

Answer 1

如果您

 import productData from './productData.js'

然后productData是productData.js的默认导出，它是一个对象，即这个对象：

  { productData }

，并且该对象具有包含所需数据的键productData。现在只导出productData，您有两种选择：

1）将productData导出为默认导出，而不将其包装到对象中：

 export default productData;
 // or
 module.exports = productData;

 // import as:
 import productData from "./productData";
 // or
 const productData = require("./productData");

2）将productData导出为命名导出，然后导入命名导出：

 export { productData };
 // or
 module.exports = { productData };

 // import as
 import { productData } from "./productData";
 // or
 const { productData } = require("/.productData");

由于文件仅包含一件事，因此1）在这里更有意义。

Answer 2

您的数组将作为对象导出，这就是为什么您必须以productData.productData的身份访问它的原因。为了避免这种情况，我们可以做这样的事情。

// first create an array in product.js file
const productsArray  = [
  {
   id: 1,
   title: 'Yellow Pail',
  },
  {
   id: 2,
   title: 'Green Pail',
  },
]

然后您可以导出

export default { 
  productsArray
}

传递React道具并以ObjectName.ObjectName的身份访问

2 个答案: