Question

以下是有关使用嵌套对象数组的复杂状态对象的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 });
  }

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

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

0 个答案: