Question

我有一个代码，侦听服务器端事件，将事件数据作为对象获取，并将其推送到状态数组。但是，此刻我将直接更新数组，而不是通过setState设置状态。否则，我会收到“太多的重新渲染”错误。

const App = () => {
  const [records, setRecords] = useState([]);
  console.log(records);
  const newRecord = useDataListener({
    eventName: "message",
    srcURL: "http://localhost:5001/status_stream"
  });

  // If change into the following lines, code won't work
  // if (newRecord !== null) {
  //   setRecords(oldRecords => [newRecord, ...oldRecords])
  //}

  // But this looks incorrect, despite being able to render content
  if (newRecord !== null) {
    records.unshift(newRecord);
  }

  return (
    <div className="ui container">
      <Header />
      <PaginationBar />
      {records.map((x, i) => (
        <SummaryLog key={records.length - (i + 1)} record={x} />
      ))}
    </div>
  );
};

有人知道为什么使用setRecords会导致过多的重新渲染吗？谢谢！

Answer 1

请勿更改records。状态应该是不变的。

此外，获取数据是一个副作用。因此，请使用useEffect挂钩来处理副作用。

useEffect(
  () => {
    setRecords(oldRecords => ([...oldRecords, newRecord]))
  }
  , [newRecord]
);

仅当有newRecord个时此钩子才会运行。

Answer 2

尝试使用具有useEffect依赖项的newRecord钩子。

useEffect(() => {
   setRecords(oldRecords => [...oldRecords, newRecord])
  }, [newRecord]);

当将一个新元素推到数组状态时，为什么setState导致太多的重新渲染？

2 个答案: