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

Question

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

当该子组件被渲染时，我将该道具数据存储到我尝试的 useState 中，然后使用 map 或 forEach function 进行迭代，但我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

Answer 1

使用条件如下

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

Answer 2

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

1. 您的DisplayOpenIncidents组件没有返回语句，因此AccordionExample组件没有被呈现。
2. 您的forEach function 不返回任何内容，因此组件不会呈现。 运行map将解决此问题。
3. 您将 state 从父母传递给孩子，然后在孩子中设置 state。 你不需要这样做。

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

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

Answer 3

基本上，您必须在使用测试object 时进行检查，如下所示

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