我正在关注初学者的React教程，并且对此有疑问：
import React from "react";
import productsData from "./productsData";
import Product from "./Product";
function App() {
const productComponents = productsData.map(product => {
<Product key={product.id} product={product} />
})
return(
<div>
{productComponents}
</div>
)
}
export default App;
导入的值productsData只是JSON样式的对象数组。如果在映射之前放入调试器，则会productsData引发未定义的错误。但是如果我这样做：
import React from "react";
import productsData from "./productsData";
import Product from "./Product";
function App() {
return(
<div>
<Product product={productsData[0]} />
</div>
)
}
export default App;
然后，它将基于数组中的第一个对象正确显示组件。
此外，在调试器中，还有一个名为的模块_productsData__WEBPACK_IMPORTED_MODULE_1__，其中包含我追随的数组等。
我的问题是为什么我不能访问productsData？
我相信，在第一个实例中，您在map函数中缺少return语句。由于您将方括号内的map函数包含在内，因此Javascript正在寻找要返回到map函数返回到的数组中的对象productComponents。
第二个示例为您工作的原因是由于您正确返回了组件。
我相信类似以下的内容应该适合您。
**注意组件前面的return关键字。
const productComponents = productsData.map(product => {
return <Product key={product.id} product={product} />;
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句