时间戳

首页 > 解决方案 > ReactJS：无法读取未定义的属性“映射”

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

问题描述

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

当该子组件被渲染时，我将该道具数据存储到我尝试使用的 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

标签： javascriptreactjs

解决方案

使用条件如下

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

推荐阅读