當組件位於數組內時，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>
  );
}