如何在React函数式组件中通过字符串动态访问state状态变量

你可以将需要动态访问的关联状态集中存放在单个useState管理的对象中，即可复用类组件的方括号动态读写语法，具体实现如下：

import React, { useState } from 'react';

const Form = () => {
  // 统一管理表单相关状态
  const [formState, setFormState] = useState({
    inputOne: null,
    inputOneMissing: false
  });

  const handleBlur = (e, name) => {
    // 动态读取状态的写法和类组件完全一致
    if (!formState[name]) {
      setFormState(prevState => ({
        // 展开原有状态避免其他字段丢失
        ...prevState,
        // 动态计算属性名修改目标字段
        [`${name}Missing`]: true
      }));
    } else {
      setFormState(prevState => ({
        ...prevState,
        [`${name}Missing`]: false
      }));
    }
  };

  return <input onBlur={(e) => handleBlur(e, "inputOne")} />;
};

export default Form;

注意要点 #

• 上述方案中formState的作用和类组件的this.state完全对齐，支持通过formState[变量名]的方式动态读取任意字段
• 更新状态时推荐传入函数获取上一次的最新状态快照，避免闭包问题导致的状态更新错误
• 如果你把状态拆分为多个独立的useState声明，就无法实现动态访问，需要动态读写的状态必须统一存放在同一个对象中
• 如果是复杂的多字段表单场景，也可以选择useReducer来管理状态，逻辑拆分更清晰，同样支持动态属性读写

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