如何在React事件处理器中使用新Context API设置上下文变量？

首先得明确：新的React Context API中，你不能直接修改Context对象的值，必须通过维护在Provider所在组件中的状态来更新，再把更新后的状态和更新方法通过Provider传递给子组件。下面是具体的实现步骤：

1. 完善Context的Provider配置 #

首先在你的根组件（比如App.js）中，需要维护版本相关的状态，并提供一个更新版本的方法，然后通过AppContext.Provider把这些值传递给整个应用：

import React, { useState } from 'react';
import { AppContext } from './AppContext';
import VersionChooser from './VersionChooser';

function App() {
  // 初始化版本列表和当前选中版本的状态
  const [versions, setVersions] = useState([]);
  const [currentVersion, setCurrentVersion] = useState(null);

  // 定义更新当前版本的方法
  const updateCurrentVersion = (versionId) => {
    setCurrentVersion(versionId);
  };

  // 这里可以加一个获取版本列表的逻辑，比如从API加载
  // useEffect(() => {
  //   fetch('/api/versions')
  //     .then(res => res.json())
  //     .then(data => setVersions(data));
  // }, []);

  return (
    <AppContext.Provider 
      value={{ 
        versions, 
        currentVersion, 
        updateCurrentVersion // 把更新方法也放进Context的value里
      }}
    >
      {/* 你的其他应用组件 */}
      <VersionChooser />
    </AppContext.Provider>
  );
}

export default App;

2. 修改VersionChooser组件，消费Context并更新版本 #

因为你的VersionChooser是类组件，我们可以用static contextType来直接访问Context，然后在选择器的change事件中调用Context里的更新方法：

import React, { Component } from 'react';
import { AppContext } from './AppContext';

class VersionChooser extends Component {
  // 绑定Context，这样就能通过this.context访问Context的值和方法
  static contextType = AppContext;

  handleSelectChange = (event) => {
    const selectedVersionId = event.target.value;
    // 调用Context中的更新方法，修改当前版本
    this.context.updateCurrentVersion(selectedVersionId);
  };

  render() {
    const { versions, currentVersion } = this.context;

    return (
      <select value={currentVersion} onChange={this.handleSelectChange}>
        {/* 渲染版本选项，这里假设每个version对象有id和name属性 */}
        {versions.map(version => (
          <option key={version.id} value={version.id}>
            {version.name}
          </option>
        ))}
      </select>
    );
  }
}

export default VersionChooser;

如果你更倾向于用函数组件，写法会更简洁：

import React, { useContext } from 'react';
import { AppContext } from './AppContext';

function VersionChooser() {
  const { versions, currentVersion, updateCurrentVersion } = useContext(AppContext);

  const handleSelectChange = (event) => {
    updateCurrentVersion(event.target.value);
  };

  return (
    <select value={currentVersion} onChange={handleSelectChange}>
      {versions.map(version => (
        <option key={version.id} value={version.id}>
          {version.name}
        </option>
      ))}
    </select>
  );
}

export default VersionChooser;

关键要点总结 #

• Context的value是不可直接修改的，必须通过Provider所在组件的useState（或useReducer）来维护状态，再通过更新方法触发状态变更，从而更新Context的value。
• 一定要把更新方法放进Provider的value中，这样子组件才能触发Context的更新。
• 类组件通过static contextType访问Context，函数组件用useContext钩子，两种方式都能拿到Context的最新值。

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