如何通过变量引用创建React状态？实现以数组项为状态键

首先看你代码里的一个小冗余：const name = nextProps.columns[nextProps.columns.indexOf(c)]; 其实forEach循环里的c就是数组中的当前元素，完全可以直接用c作为状态键，不用再通过index去取一遍，这步是多余的。

核心实现：ES6计算属性名 #

React的setState支持用ES6计算属性名来动态设置状态的键，这正是你需要的功能。直接用[变量名]作为对象的键，就能把变量的值作为状态属性名。

先给你修正后的componentWillReceiveProps版本（虽然这个生命周期现在已经被废弃，但先帮你把逻辑改对）：

componentWillReceiveProps(nextProps) {
  nextProps.columns.forEach((columnName) => {
    // 用计算属性名[columnName]动态设置状态键
    this.setState({
      [columnName]: this.props.activeHeaders.includes(columnName)
    });
  });
}

这里用includes替代indexOf > -1，代码更简洁易读，功能是完全一致的。

推荐：替换废弃的生命周期方法 #

从React 16.3开始，componentWillReceiveProps已经被标记为废弃（会在未来版本移除），官方推荐使用static getDerivedStateFromProps这个静态生命周期方法，它能避免componentWillReceiveProps带来的一些反模式（比如不必要的重渲染、状态不一致）。

下面是更规范的实现：

static getDerivedStateFromProps(nextProps, prevState) {
  // 先判断props是否真的变化，避免无意义的状态更新
  if (nextProps.columns !== prevState.prevColumns || nextProps.activeHeaders !== prevState.prevActiveHeaders) {
    const newState = {};
    nextProps.columns.forEach((columnName) => {
      newState[columnName] = nextProps.activeHeaders.includes(columnName);
    });
    // 保存当前的props到state，用于下次对比
    return {
      ...newState,
      prevColumns: nextProps.columns,
      prevActiveHeaders: nextProps.activeHeaders
    };
  }
  // 不需要更新状态时返回null
  return null;
}

这个方法是静态的，不能访问this，所以需要把之前的columns和activeHeaders存在state里，作为下次判断props是否变化的依据，这样能保证状态更新的准确性和性能。

如果是函数组件？用useEffect实现 #

如果你正在用函数式组件，那可以用useEffect来监听props变化，动态更新状态：

import { useEffect, useState } from 'react';

function YourComponent(props) {
  const [columnStates, setColumnStates] = useState({});

  useEffect(() => {
    const newStates = {};
    props.columns.forEach((columnName) => {
      newStates[columnName] = props.activeHeaders.includes(columnName);
    });
    setColumnStates(newStates);
  }, [props.columns, props.activeHeaders]); // 只有当这两个props变化时才执行

  // 后续可以通过columnStates[columnName]访问对应状态
  return <div>{/* 组件内容 */}</div>;
}

总结一下，核心就是利用ES6的计算属性名[variable]来动态生成状态的键，这是实现你需求的关键。同时记得遵循React的生命周期最佳实践，尽量避免使用废弃的API哦～

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