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

Question

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

import React, { useState, useEffect } from "react";
import axios from "axios";
import { useParams } from "react-router";

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

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

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

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>
  );
};