Reactjs 如何从react钩子中的字符串名动态执行适当的useState？

设想一个场景，通过不同的值执行相同的操作（例如，为不同的输入值生成自定义html元素）；在使用组件类的情况下，我会模拟如下：

const onFuncClicked = property => newVal => {
 this.setState({ [property]: newVal })
}

但是如果我使用react钩子呢：

  const onFuncClicked = property => newVal => {
    eval(`set${property}(${newVal})`);
  }

---

不仅由于成千上万的原因不推荐使用eval，而且这段代码根本不起作用！！它生成正确的useState函数，但组件甚至不知道它，并给出一个引用错误，即该函数（生成的useState）未定义。一种方法是使用方法映射到属性名称：

const [property, setProperty] = useState(defaultValue);

const methodMap = { propetryName: setPropertyName, /* ... more fields */ };

然后可以从set方法调用它，如下所示：

const onClicked = (property, value) => {
    methodMap[property](value);
}

另一个选项，可能是更常见的选项，是将状态作为包含所有属性的对象，并按属性名称更改它们：

const [state, setState] = useState({property: value});

const onClicked = (property, value) => {
    setState(state => {...state, [property]: value});
}

---

好的，如果您已经在使用hook和

useState

，并且最终使用了一堆使代码看起来太复杂的hook和

useState

，我建议您使用

useReducer

，下面是一个来自官方文档的示例：

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
    </>
  );
}```

功能减速机（状态、动作）{
开关（动作类型）{
案例“增量”：
返回{count:state.count+1}；
“减量”一案：
返回{count:state.count-1}；
违约：
抛出新错误（）；
}
}
函数计数器（）{
const[state，dispatch]=useReducer（reducer，initialState）；
返回(
计数：{state.Count}
分派（{type:'increment'}）}>+
分派（{type:'decrement'}）}>-
);
}```

使用

useState

您可以自由地使用对象作为数据，在调用setter时，您只需更新对象，而不是尝试动态确定要使用哪个setter。请看这里的问题：第一个解决方案是有效的，但是如果您有几十个可能的使用状态，那么编写它会很痛苦。但是第二个选项现在可以工作了，因为如果要区分适当的useState和Property，第二个选项类似于在基于类的组件中使用

setState

。