ReactJS：无法读取未定义的属性“映射”答案

【问题标题】：ReactJS: Cannot Read Property 'map' of UndefinedReactJS：无法读取未定义的属性“映射”
【发布时间】：2021-08-12 18:04:35
【问题描述】：

我有一个父组件，它获取数据并将其存储到 useState 中，然后作为 props 传递给子组件。

当该子组件被渲染时，我将该道具数据存储到 useState 中，然后我尝试使用 map 或 forEach 函数进行迭代，但我得到 cannot read property of undefined errors

在检查 React 开发工具时，存在从父级传递给子级的数组，所以我不太确定自己做错了什么。

父组件：

const DisplayOpenIncidents = () => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const incidents = FetchIncidents();

    incidents.then((incidents) => {
      setData(incidents);
      setLoading(false);
    });
  }, []);

  return (
    <AccordionExample data={data} />
  );
};

子组件：

const AccordionExample = (props) => {
  const [test, setTest] = useState(props.data);

  useEffect(() => {
    console.log(props.data); // Displays array
    setTest(props.data);
  }, [props]);

  return (
    <Accordion defaultActiveKey="0">
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey="0">
          TITLE
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="0">
          <Card.Body>
            {test.forEach((test) => {
              console.log(test);
            })}
          </Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
};

TIA

【问题讨论】：

为什么要在 useEffect 中设置 test？
@evolutionxbox 无论哪种方式，将其设置在 useEffect 中或根本不设置仍然不允许我对其进行迭代
你为什么要将道具复制到状态中？这是一个已知的anti-pattern
这可能是因为 - FetchIncidents 返回未定义。这应该是异步调用吗？即作为 const 事件 =await FetchIncidents();

标签： javascript reactjs

【解决方案1】：

使用条件如下

<Accordion.Collapse eventKey="0">
      <Card.Body>
        {test && test.forEach((test) => {
          console.log(test);
        })}
      </Card.Body>
    </Accordion.Collapse>

【讨论】：

【解决方案2】：

我试图用一些数字作为事件来重新创建它。我看到的问题是……

您的DisplayOpenIncidents 组件没有返回语句，因此AccordionExample 组件没有被渲染。
您的forEach 函数不返回任何内容，因此组件不会呈现。运行 map 将解决此问题。
您正在将状态从父级传递给子级，然后在子级中设置状态。您无需这样做。

这是使用替代错误数组的代码...

import React, { useState, useEffect } from "react"

const AccordionExample = (props) => {

  return (
    <div defaultActiveKey="0">
      <div>
        <div eventKey="0">
          TITLE
        </div>
        <div eventKey="0">
          <div>
            {props.data.map((test) => <p>{test}</p>)}
          </div>
        </div>
      </div>
    </div>
  );
};

const App = () => {
  const [data, setData] = useState([]);

useEffect(() => {
  const incidents = [1, 2, 3]

  //incidents.then((incidents) => {
    setData(incidents);
    //setLoading(false);
  //});
}, []);

return (<AccordionExample data={data} />);
}


export default App

【讨论】：

谢谢保罗，感谢您在这里的详细回复。我已经考虑了您对道具和状态的考虑，并将其从我的子组件中删除。我的解决方案是在尝试 .map/forEach 循环之前进行另一次检查。再次感谢

【解决方案3】：

基本上，您必须在使用 test 对象时进行检查，如下所示

<Accordion.Collapse eventKey="0">
      <Card.Body>
        {test ? test.forEach((test) => {
          console.log(test);
        }) : "Error"}
      </Card.Body>
</Accordion.Collapse>

【讨论】：