reactjs - 如何从 react 钩子(Hook)中的字符串名称动态执行适当的useState？

Question

想象一个场景，通过不同的值进行相同的操作(例如为不同的输入值生成自定义的 html 元素)；在使用组件类的情况下，我将模拟如下:

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

但是如果我使用 react 钩子(Hook)怎么办:

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

不仅出于数千个原因不推荐使用 eval，而且这段代码根本不起作用!它生成正确的 useState 函数，但组件甚至不知道它，并给出一个 ReferenceError 表明该函数(生成的 useState)未定义

Answer 1

一种方式解决这个问题的方法是使用属性名称的方法映射:

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

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

然后你可以像这样从你的 set 方法调用它:

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

另一种选择 ，并且可能更常见的一种是将状态作为具有所有属性的对象并通过 Prop 名称更改它们:

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

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