当组件位于数组内时，State 不会从 function 更新

Question

在这种情况下（ Dominator ）从其他组件更改 state 是有效的，但是当我将这些组件放在一个数组中并做同样的事情时， updateCounter function 被调用，但它没有更新counter Z9ED39E2EA931586B3EZEF558。

import { useEffect, useState } from "react";
import Dominator from "./dominator";
import "./styles.css";

export default function App() {
  const [counter, setCounter] = useState(1);
  const updateCounter = () => {
    console.log("counter lookup: ", counter);
    setCounter(counter + 1);
  };
  const [dominators, setDominators] = useState([
    <Dominator key={0} updateCounter={updateCounter} />
  ]);

  useEffect(() => {
    console.log("counter has changed:", counter)
  }, [counter])
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {dominators.map((item) => {
        return item;
      })}
    </div>
  );
}

Answer 1

问题

问题是updateCounter回调中的过时 state 机箱。 每个映射元素都在接收一个回调，该回调具有相同的counter值以进行更新。

在 state 中存储实例化的 React 组件也是反模式，对陈旧的 state 外壳没有帮助。 您应该只存储数据并从数据中呈现派生的 JSX。

解决方案

使用功能性 state 更新以正确更新之前的 state 而不是包含回调/状态更新的 state。

仅将dominators器 state 和 map 中的数据存储到Dominator器组件。

export default function App() {
  const [counter, setCounter] = useState(1);

  const updateCounter = () => {
    setCounter(counter => counter + 1);
  };

  const [dominators, setDominators] = useState([0]);

  useEffect(() => {
    console.log("counter has changed:", counter);
  }, [counter]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {dominators.map((item) => (
        <Dominator key={item} updateCounter={updateCounter} />
      ))}
    </div>
  );
}