Question

我有一个具有状态值的功能组件，该值基于来自 Context 的 prop，当我更新我的 Context 值时，状态值也不会更新。

export default function PomoTimer() {
  const { state } = useContext(AppContext)
  const { pomodoroDuration } = state
  const [timeLeft, setTimeLeft] = useState(pomodoroDuration)

  console.log('pomoDuration', pomodoroDuration)
  console.log('timeLeft', timeLeft)
  ...
}

这里当我从上下文更新 PomodoroDuration 时，timeLeft 状态值不等于新的 PomodoroDuration。我希望“timeLeft”值在更新时始终更新并等于新的 pomodoroDuration，我该怎么做？

当我将 Context.pomoDuration 更改为新值时，会记录：

pomoDuration 30
timeLeft 50

然而，我正在使用 pomoDuration 值 const [timeLeft, setTimeLeft] = useState(pomodoroDuration) 初始化我的 timeLeft 状态值，所以我真的不明白这里发生了什么。谢谢！

Answer 1

State 只会在组件挂载时实例化一次。如果您想在上下文更新时更新 timeLeft 状态，请为此使用依赖于 pomodoroDuration 的效果。如果您熟悉基于类的组件，那么带有依赖项的 useEffect 钩子等效于 componentDidUpdate。

export default function PomoTimer() {
  const { state } = useContext(AppContext);
  const { pomodoroDuration } = state;
  const [timeLeft, setTimeLeft] = useState(pomodoroDuration);

  useEffect(() => {
    setTimeLeft(pomodoroDuration);
  }, [pomodoroDuration]);

  ...
}

旁注：不要在功能组件的主体中控制台日志状态更新，您还应该为此使用效果。

基于上下文属性的有状态值未更新

1 个答案: