Question

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

2021-05-24

236

javascript reactjs

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

当该子组件被渲染时，我将该 prop 数据存储到 useState 中，然后尝试使用 map 或 forEach 函数对其进行迭代，但出现 无法读取未定义错误的属性

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

父组件：

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

我尝试使用一些数字作为事件来重现此问题。我看到的问题是...

您的 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

Answer 3

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

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