我使用参数和结果：类型错误：无法读取未定义的属性(读取"地图")

Question

export const listProducts = () => async (dispatch) => {
dispatch({ type: PRODUCT_LIST_REQUEST, 
});
try {
const { data } = await Axios.get("/api/products");
dispatch({type: PRODUCT_LIST_SUCCESS, payload: data });
} catch (error) {
dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message
});
}

}；

<div>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<div className="row center">
{products.map(product => (
<Product key={product._id} product={product} />
))}
</div>
)}

)；当我尝试运行此代码时，它会给我以下错误：

×TypeError：无法读取未定义(读取"map"(的属性

我不知道为什么。我试过各种可能的方法，但都没用。

Answer 1

您是否尝试过登录"产品"；检查它是否包含在获取请求之后要映射的数据？

错误消息表明产品未定义，这就是错误显示的原因，因为它无法映射到空数组上。

如果是这样，您可以对有条件地渲染产品的加载和错误执行类似的操作。我用过&amp；(逻辑与(，但有几种方法可以检查乘积是否未定义(通过长度或使用另一个三元运算符，如您的示例所示。

<div>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<div className="row center">
{products && products.map(product => (
<Product key={product._id} product={product} />
))}
</div>
)}

Answer 2

感谢您的回答谢谢你的回答通过更新productReducers.js 修复

错误为：

返回{加载：false，产品：action.payload.products，}；

删除产品关键字并修复：

返回{加载：false，产品：action.payload，}；