Question

React 在渲染之前未获取数据[关闭]

2022-06-02

185

reactjs react-hooks use-effect

ref: https://github.com/JuniorChang/SojuSushi/blob/main/frontend/src/screens/ProductScreen.js

在我的代码行 155-200 中，当我第一次进入该页面时，页面不会显示任何内容。但是，如果我注释掉这些行，页面的其余部分就会出现，我继续取消注释这些行，现在它就可以正确显示了。同样，如果我刷新页面，它又会变成空白。控制台显示： Uncaught TypeError：无法读取未定义的属性（读取“map”）

Answer 1

使用 && 或 ?。

{productDetails?.product?.reviews?.length === 0 && <Message>No                  Reviews</Message>}
              <ListGroup variant='flush'>
                {productDetails?.product?.reviews?.map((review) => (
                  <ListGroupItem key={review._id}>
                    <strong>{review.name}</strong>
                    <Rating value={review.rating} />
                    <p>{review.createdAt.substr(0,10)}</p>
                    <p>{review.comment}</p>
                  </ListGroupItem>
                ))}

reviews.length 仅给出数组的长度。

Answer 2

未捕获 TypeError：无法读取未定义的属性（读取“map”） 这是一个超级通用的错误消息。您的变量未定义，并且您正在访问 map。

原因可能是

dispatch(listProductDetails(id));
     dispatch({ type: PRODUCT_CREATE_REVIEW_RESET });

本质上状态从

REQUEST:: productList=null, loading=true, error=null
RESET:: productList=null, loading=null, error=null
SUCCESS:: productList=(object), loading=true, error=null

在 RESET 渲染时，它将尝试访问未初始化的对象

您可以在 chrome 中使用 redux 插件来查看您的操作以及它们如何影响您的商店。这是一个很棒的插件

Answer 3

下次您提问时，建议您尝试更详细地分析您正在处理的问题。

话虽如此，在我阅读了您的代码之后，我认为您应该在从可能 undefined 的 array 调用 array 方法时使用 ? 运算符，如下所示：

array?.map(...)

或者您改为这样做：

array.length > 0 && array.map