React中依赖其他State的State值无法更新问题排查与解决

复现步骤 #

• 进入Codesandbox控制台，查看typeA和allTypes的初始值。
  
• 点击“Update type A”按钮
• 在控制台中查看更新后的typeA和allTypes值。
  

预期行为 #

allTypes中的typeA字段值应为"different value"。

实际行为 #

allTypes中的typeA字段值未发生改变。

问题解答 #

1. 为何allTypes中的typeA字段值无法更新？

useState的初始值参数仅在组件首次挂载渲染时生效，后续组件重新渲染时不会重新计算这个初始值。allTypes的初始状态是基于首次渲染时的typeA值创建的，当typeA通过setTypeA更新后，allTypes并不会自动同步这个变化——因为它没有被重新赋值，所以始终保留着初始的typeA值。

2. 该如何修复此问题？

有三种可行的修复方案，可根据实际场景选择：

方案一：用useEffect监听依赖状态变化，同步更新allTypes

通过useEffect监听typeA和typeB的变化，每当依赖项更新时，重新设置allTypes的状态，确保两者同步：

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

export default function App() {
  const [typeA, setTypeA] = useState("01");
  const [typeB, setTypeB] = useState("abc");

  const [allTypes, setAllTypes] = useState({
    typeA: [typeA],
    typeB
  });

  // 监听typeA和typeB的变化，同步更新allTypes
  useEffect(() => {
    setAllTypes({
      typeA: [typeA],
      typeB
    });
  }, [typeA, typeB]);

  console.log({ typeA });
  console.log({ allTypes });
  return (
    <div>
      <button onClick={() => setTypeA("different value")}>
        Update type A
      </button>
    </div>
  );
}

方案二：更新typeA时直接同步更新allTypes

在调用setTypeA的同时，通过函数式更新setAllTypes（确保基于最新状态修改），直接同步更新allTypes中的typeA字段：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [typeA, setTypeA] = useState("01");
  const [typeB, setTypeB] = useState("abc");

  const [allTypes, setAllTypes] = useState({
    typeA: [typeA],
    typeB
  });

  console.log({ typeA });
  console.log({ allTypes });
  return (
    <div>
      <button onClick={() => {
        const newTypeA = "different value";
        setTypeA(newTypeA);
        // 函数式更新，基于之前的allTypes状态修改
        setAllTypes(prevState => ({
          ...prevState,
          typeA: [newTypeA]
        }));
      }}>
        Update type A
      </button>
    </div>
  );
}

方案三：合并状态，只维护allTypes

如果typeA和typeB不需要单独作为独立状态存在，可以直接合并到allTypes中，减少状态冗余，避免同步问题：

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [allTypes, setAllTypes] = useState({
    typeA: ["01"],
    typeB: "abc"
  });

  console.log({ typeA: allTypes.typeA[0] });
  console.log({ allTypes });
  return (
    <div>
      <button onClick={() => {
        setAllTypes(prevState => ({
          ...prevState,
          typeA: ["different value"]
        }));
      }}>
        Update type A
      </button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者CCCC