React中Context更新后未触发组件执行函数该如何解决

1. 修正Context字段取值错误 #

你当前Lobby组件中传入renderData的参数是user_context.state.data，但从给出的UserContextProvider代码来看，state中根本没有定义data属性，你更新的是chapters_complete、number_ch_complete、loading三个字段，请先把取值替换为实际需要的字段，示例：

// 调整前
<div>{renderData(user_context.state.data)}</div>
// 调整后，比如需要传入已完成章节列表
<div>{renderData(user_context.state.chapters_complete)}</div>

2. 补充Context state默认值 #

你当前在constructor中初始化的state是空对象，首次渲染时相关字段为undefined，可能导致逻辑异常，建议补充初始化值：

constructor(props){
    super(props)
    this.state = {
        loading: false,
        chapters_complete: [],
        number_ch_complete: 0
    }
};

3. 排查阻止重渲染的逻辑 #

• 检查Lobby组件是否被React.memo包裹且自定义了比较函数，自定义比较函数如果未识别context关联的变化会跳过重渲染，要么删除自定义比较函数，要么在比较逻辑中加入context相关的判断。
• 不要将useContext返回的对象赋值给组件内部的普通变量后再使用，普通变量的变更不会触发组件重渲染，必须直接使用useContext返回的对象属性。

4. 验证renderData函数逻辑 #

如果通过React DevTools已经确认Context值更新，且Lobby组件拿到了最新值，可以在Lobby组件中加effect日志确认组件是否重渲染：

function Lobby() {
  const user_context = useContext(UserContext);
  // 监听核心字段变化，有日志输出说明组件已触发重渲染
  useEffect(() => {
    console.log('已完成章节更新：', user_context.state.chapters_complete);
  }, [user_context.state.chapters_complete]);

  return <div>{renderData(user_context.state.chapters_complete)}</div>
}

如果日志正常输出，说明问题出在renderData函数本身，比如内部做了缓存、逻辑判断错误导致返回的渲染内容没有变化，对应调整renderData逻辑即可。

可选优化：避免Context不必要的重渲染 #

你当前在Provider的render方法中每次都生成新的value对象，哪怕state不变也会导致所有消费组件重渲染，可以调整为只在state更新时同步value：

class UserContextProvider extends Component {
  // 提前定义固定的方法引用，避免每次生成新对象
  contextValue = {
    toggleLoading: this.toggleLoading,
    finishChapter: this.finishChapter,
    state: this.state
  }

  constructor(props){
    super(props)
    this.state = {
      loading: false,
      chapters_complete: [],
      number_ch_complete: 0
    }
    // 初始化state到contextValue
    this.contextValue.state = this.state
  };

  // 重写setState，每次更新后同步到contextValue
  setState(updater, callback) {
    super.setState(updater, () => {
      this.contextValue.state = this.state;
      callback?.();
    });
  }

  render() {
    return (
      <UserContext.Provider value={this.contextValue}>
        {this.props.children}
      </UserContext.Provider>
    )
  }
}

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