React.useContext不更新问题：设置SelectedBackgroundContext后状态无变化

问题根因 #

• 缺少正确的Context Provider配置：你当前定义的Context默认值中selectBackground是空函数，如果你没有在上层组件用SelectedBackgroundContext.Provider包裹子组件并传入实际的状态修改方法，调用该函数不会触发任何状态更新。
• 在组件渲染逻辑中直接调用状态修改方法：函数组件顶层代码会在每次渲染时执行，直接在顶层调用selectBackground不仅会导致当前渲染周期拿不到更新后的状态值，还会触发反复重渲染甚至死循环。

解决步骤 #

步骤1：配置上层Context Provider #

在包裹Child组件的父组件中，声明状态并传入Provider的value，示例代码如下：

import { useState } from 'react';
import { SelectedBackgroundContext } from './你的context文件路径';
import Child from './Child';

export default function Parent() {
  const [selectedBackground, setSelectedBackground] = useState(
    "https://lp-cms-production.imgix.net/2019-06/81377873%20.jpg?fit=crop&q=40&sharp=10&vib=20&auto=format&ixlib=react-8.6.4"
  );

  return (
    <SelectedBackgroundContext.Provider 
      value={{
        selectedBackground,
        selectBackground: (newVal) => setSelectedBackground(newVal)
      }}
    >
      <Child />
    </SelectedBackgroundContext.Provider>
  )
}

步骤2：修改Child组件的状态调用逻辑 #

将状态修改操作放到useEffect副作用中，仅在组件挂载时执行一次，避免反复触发重渲染：

import { useContext, useEffect } from 'react';
import { SelectedBackgroundContext } from './你的context文件路径';

export default function Child() {
  const { selectedBackground, selectBackground } = useContext(SelectedBackgroundContext);

  // 组件挂载时执行一次状态修改
  useEffect(() => {
    selectBackground(null);
  }, [selectBackground]);

  // 监听状态变化打印最新值
  useEffect(() => {
    console.log(selectedBackground);
  }, [selectedBackground]);

  const renderSelected = (context) => {
    if (context) {
      return (
        <img
          style={{ height: "200px" }}
          src={context}
          key={context + "Thumbnail"}
          alt={"thumbnail of " + context}
        />
      );
    } else {
      return <p>None</p>;
    }
  };

  return (
    <div>
      <p>Background:</p> {renderSelected(selectedBackground)}
    </div>
  );
}

补充说明 #

React的状态更新是异步批量的，当前渲染周期内调用状态修改方法后，当前作用域内的状态变量不会立刻变更，需要等待下一次组件重渲染才能拿到最新值。

内容的提问来源于stack exchange，提问作者ariel-walley