Question

React Full Stack：无法读取未定义的属性（读取‘map’）

2021-11-25

62

javascript reactjs

我想弄清楚我在这里做错了什么，但我并不完全确定。我想从网站传递一个对象，根据数据库（澳大利亚）它是“颜色”。

然后我想将此数组映射到前端以仅显示这些颜色。例如，此数组具有 [“白色”，“黑色”，“红色”] 等。

最初我有一个 useEffect 函数，如下所示：

useEffect(() => {
  const getProduct = async () => {
    try {
      const res = await publicRequest.get("/products/find/" + id);
      setProduct(res.data);
    } catch {}
  };
  getProduct();
}, [id]);

从这里，我试图映射：

<Filter>
  <FilterTitle>Colour</FilterTitle>
  {product.color.map((c)=> (
    <FilterColour color={c} key={c}/> 
  ))}
</Filter>

但我收到了经典的：

TypeError: Cannot read properties of undefined (reading 'map')

我尝试了 colour、color 等，但无法解决？有什么想法吗？Stack！

Answer 1

在调用 setProduct 之前，您的默认值应具有 color 作为其属性，并且需要是一个数组。如果您在调用 setProduct 之后遇到此问题，只需检查 res.data 以查看您是否以预期的格式获取数据。

Answer 2

由于您尝试呈现的数据是异步函数的结果， product 在初始渲染期间仍未填充，仅在之后填充。

我们通常在 React 中为规避这种情况所做的是添加条件语句。

这应该可以解决问题 -

<Filter>
  <FilterTitle>Colour</FilterTitle>
  {product.color && product.color.map((c)=> (
    <FilterColour color={c} key={c}/> 
  ))}
</Filter>

Answer 3

您需要确保要访问的属性保持相同的数据结构。如果不是，您需要检查它是否未定义。

解决方案 1：

保持相同的数据结构。 useState 钩子应初始化为：

const [product, setProduct] = useState({color: []})
// or populate other attributes in the initial state.

解决方案 2：
检查数据是否存在：

{product.color && product.color.map((c)=> (
  <FilterColour color={c} key={c}/> 
))}