反应-处理复杂状态对象时在UseState和UseReducer之间进行选择

编程问答 2022-10-16

问题描述

以下是有关使用嵌套对象数组的复杂状态对象的useState最佳实践的问题。这涉及处理反应状态的不变性以及如何正确更新状态。

我的状态变量是原始类型和一些这样的对象数组的混合：

interface stateObjectTypes{
    id: string,name: string,someObjects : someObjectType[]
}

我将其用作状态变量集，就像带有空字段的初始状态一样。

const [state,setState] = useState(initialState);

对于name属性，我在此事件上附加了文本字段，它可以很容易地更改任何非嵌套属性。

 function handleChange(evt: any) {
    const value = evt.target.value;
    setState({ ...state,[evt.target.name]: value });
  }

          <TextField
            name="name"
            label="Name"
            type="text"
            value={state.name}
            onChange={handleChange}
          ></TextField>

当我想向“ someObjects”数组中添加新的“ someObject”时，我决定制作一个复制该state.someObjects数组的函数，将一个新项目推入其中，然后使用类似的方法来更新状态变量。

  function addobject(newObject : someObject) {
    const copyArray = state.someObjects;
    copyArray?.push(someObject);

    setState({ ...state,someObjects: copyArray });
  }

这是最佳做法吗？我觉得一个减速器也可以在这里工作，但是我还没有确信这会更糟/更慢，即使我嵌套了很多对象，它似乎也能工作。我想知道这是否是最好的解决方案！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-hooksreactjsreactjsuse-state