Question

我有一个功能组件，它在页面加载时从 http 请求中检索数据，并使用 useState 更新状态以存储该数据。然后我尝试从数据中映射出一个嵌套数组 (polls.pollOptions)，我收到一个错误：“TypeError：无法读取未定义的属性 'map'”。如果我删除 map 函数并检查 React 组件扩展，我可以看到状态已更新并且具有正确的数据。那么为什么这不渲染到屏幕上&为什么在有数据映射时会收到错误？这是我的组件：

Serial_Number|District|Area|Production|profit
1|Ariyalur|1|2|3
2|Coimbatore|4|6|1.12
3|Cuddalore|8|3|7

Answer 1

您当前的初始状态是一个空数组，并且您正在尝试访问 pollOptions，这是一个在空数组中不存在的属性。

如果你不需要任何东西，除了pollOptions，将初始状态保留为空数组，映射数据时使用polls而不是polls.pollOptions，并确保设置pollOptions 作为状态：

export const EditPolls2 = () => {
  const { _id } = useParams();
  const [polls, setPolls] = useState([]);

  useEffect(() => {
    axios.get(`/polls/${_id}`).then((p) => {
      setPolls(p.data.pollOptions); // set the pollOptions array as the state
    });
  }, [_id]);

  return (
    <div>
      <p>edit polls 2</p>
      <div>
        <ul>
          {polls.map((p) => ( // use polls and not pollOptions
            <li key={p.pollId}>{p.option}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

如果确实需要状态中的整个对象（data），请不要使用初始状态，而在映射数组时使用optional chaining (?.)。如果状态是 undefined，映射将被跳过：

export const EditPolls2 = () => {
  const { _id } = useParams();
  const [polls, setPolls] = useState(); // no initial state

  useEffect(() => {
    axios.get(`/polls/${_id}`).then((p) => {
      setPolls(p.data);
    });
  }, [_id]);

  return (
    <div>
      <p>edit polls 2</p>
      <div>
        <ul>
          {polls.pollOptions?.map((p) => ( // optional chaining
            <li key={p.pollId}>{p.option}</li>
          ))}
        </ul>
      </div>
    </div>
  );
};

React 中的状态更改后功能组件不会重新渲染

1 个答案: