以ObjectName.ObjectName的形式传递响应道具和访问

Question

我正在导入一个像so 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");

由于该文件只包含一件东西，因此这里更有意义。

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
}