Javascript 在react功能组件中通过字符串动态设置变量

我想使用react查询库，但该库仅在功能组件中可用。我目前有一个类组件，它根据字符串动态设置字段的状态。例如（简化了，实际上它从REST调用中获取字段，每次都会产生不同的字段，这就是为什么它需要是动态的）：

但由于钩子不能用于循环、嵌套函数或回调函数中，因此我无法通过以下方式动态设置状态：

useState()

---

有没有一种方法可以像我在类组件中那样使用钩子在功能组件中动态设置状态？

我不知道这与react查询有什么关系，但您也可以只创建一个保存您的值的

useState

对象：

uiFields = ["first_name", "last_name", "email"]
const [state, setState] = React.useState(() => uiFields.reduce(acc => {
    acc[v] = "no key given" 
    return acc
}, {}))

const updateState = (fieldName, value) =>
    setState(previousState => ({ ...previousState, [fieldName]: value })

这有点复杂，因为调用

setState

时需要始终返回完整对象，而不是基于类的版本，在基于类的版本中可以返回部分对象

但是现在您可以调用

updateState（“myKey”，“myValue”）

，它的工作原理应该与基于类的等效程序类似

---

对于更复杂的状态管理，还有

useReducer

，它可能在这里派上用场。

完美，这就是我要找的。我的应用程序现在动态地创建了一个完整的表单字段列表，我可以将其耦合到一个动态生成的状态。你可能想看看它的钩子。在本例中，添加库可能有些过分，但随着状态更改变得更加复杂，编写

updateState（state=>{state[fieldName]=value}）

可能比

setState（state=>（{…state[fieldName]：value}））更简单。

。尤其是在处理数组和嵌套对象时。让库处理突变问题。

uiFields = ["first_name", "last_name", "email"]
const [state, setState] = React.useState(() => uiFields.reduce(acc => {
    acc[v] = "no key given" 
    return acc
}, {}))

const updateState = (fieldName, value) =>
    setState(previousState => ({ ...previousState, [fieldName]: value })