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

Question

Changing state from other components in this case ( Dominator ) is working but when I put those components inside an array and do the same thing the updateCounter function is getting called but it's not updating the counter state.

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

Issue

The issue is stale state enclosures in the updateCounter callback. Each mapped element is receiving a callback with the same value of counter to update from.

Storing instantiated React components in state is also anti-pattern and doesn't help the stale state enclosures. You should store the data only and render the derived JSX from the data.

Solution

Use a functional state update to correctly update from the previous state instead of the state the callback/state update was enclosed in.

Store only the data in the dominators state and map it to the Dominator component.

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