React中useState调用自定义Hook后值未更新的原因咨询

问题根源 #

你犯了React Hook的常见错误：把自定义Hook作为useState的初始值传入。useState的初始参数只会在组件**首次渲染（挂载）**时执行一次，后续即使依赖（比如roomType）发生变化，这个初始值也不会被重新计算。所以哪怕roomType变成有效值后，useAdditionalGuestAmounts确实执行了，但useState不会用新的返回值去更新additionalGuestAmounts状态，它始终保持首次渲染时的空数组。

解决方案 #

有两种正确的处理方式，根据你的需求选择：

方式1：直接使用自定义Hook的返回值（推荐，若无需保存状态）

如果不需要把additionalGuestAmounts作为本地状态保存，只是需要基于实时的roomType和occupantsForBaseRate计算结果，直接去掉useState，直接用自定义Hook的返回值即可：

const additionalGuestAmounts = useAdditionalGuestAmounts(roomType, occupantsForBaseRate);

这样每次roomType或occupantsForBaseRate变化时，自定义Hook都会重新执行，返回最新的计算结果。

方式2：用useEffect监听依赖变化更新状态

如果确实需要把结果存在本地状态中（比如后续要手动修改这个值），可以用useEffect监听依赖，触发状态更新。注意：自定义Hook必须在组件顶层调用，不能放在useEffect内部，所以需要把计算逻辑抽成普通函数：

// 把计算逻辑抽成普通函数，而非Hook
const calculateAdditionalGuestAmounts = (
  roomType: RoomType,
  occupantsForBaseRate: number
): RatePlan['additionalGuestAmounts'] => {
  console.log('executing calculate function')
  if (!roomType) {
    return []
  }
  console.log('returning array')
  return [
    {
      foo: 'bar'
    },
  ]
}

// 组件内使用
const [additionalGuestAmounts, setAdditionalGuestAmounts] = useState<RatePlan['additionalGuestAmounts']>([]);

useEffect(() => {
  const newAmounts = calculateAdditionalGuestAmounts(roomType, occupantsForBaseRate);
  setAdditionalGuestAmounts(newAmounts);
}, [roomType, occupantsForBaseRate]);

这样当roomType或occupantsForBaseRate变化时，useEffect会触发，调用计算函数并更新状态。

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