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

Question

我想使用react-query 库，但是这个库只能在功能组件中使用。我目前有一个 class 组件，它基于字符串动态设置字段的状态。例如（简化，实际上它从每次都会产生不同字段的 REST 调用中获取字段，这就是它需要动态的原因）：

class MyComponent extends React.Component {
    constructor() {
        super();
        this.primaryFields = ["username"];
        this.uiFields = ["first_name", "last_name", "email"];
        this.state = {}
        this.primaryFields.map(x => {
            this.state[x] = "no key given";
        })

        this.uiFields.map(x => {
            this.state[x] = "";
        })   
    }
    ...
    ...
 }

但是由于钩子不能在循环、嵌套函数或回调函数中使用，我没有办法动态设置状态：

useState()

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

Answer 1

我看不出这与 react-query 有什么关系，但你也可以只创建一个 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 时您需要始终 return 完整对象，而不是基于 class 的版本，您可以 return 部分对象。

但现在您可以调用 updateState("myKey", "myValue")，它应该像基于 class 的等效方法一样工作。

对于更复杂的状态管理，还有useReducer，在这里可能会派上用场。

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

Dynamically set variables by string in react functional components

javascript

reactjs

react-component