你可以像这样传递新值:

  setExampleState({...exampleState,  masterField2: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
   })

我认为最好的解决办法是Immer。它允许你像直接修改字段一样更新对象(masterField.fieldOne。Fieldx = 'abc')。但它当然不会改变实际对象。它收集草稿对象上的所有更新，并在最后为您提供一个最终对象，您可以使用它来替换原始对象。

如果你使用布尔值和数组，这可以帮助你:

const [checkedOrders, setCheckedOrders] = useState<Record<string, TEntity>>({});

const handleToggleCheck = (entity: TEntity) => {
  const _checkedOrders = { ...checkedOrders };
  const isChecked = entity.id in checkedOrders;

  if (isChecked) {
    delete _checkedOrders[entity.id];
  } else {
    _checkedOrders[entity.id] = entity;
  }

  setCheckedOrders(_checkedOrders);
};

2022年

如果您正在寻找与此相同的功能。函数组件中的setState(来自类组件)，那么这是对您有很大帮助的答案。

例如

你有一个像下面这样的状态，想要从整个状态中更新特定的字段，那么你需要每次都使用对象解构，有时它会令人恼火。

const [state, setState] = useState({first: 1, second: 2});

// results will be state = {first: 3} instead of {first: 3, second: 2}
setState({first: 3})

// To resolve that you need to use object destructing every time
// results will be state = {first: 3, second: 2}
setState(prev => ({...prev, first: 3}))

为了解决这个问题，我提出了useReducer方法。请检查useReducer。

const stateReducer = (state, action) => ({
  ...state,
  ...(typeof action === 'function' ? action(state) : action),
});

const [state, setState] = useReducer(stateReducer, {first: 1, second: 2});

// results will be state = {first: 3, second: 2}
setState({first: 3})

// you can also access the previous state callback if you want
// results will remain same, state = {first: 3, second: 2}
setState(prev => ({...prev, first: 3}))

您可以将该stateReducer存储在utils文件中，如果需要，也可以将其导入到每个文件中。

如果你需要，这里是自定义钩子。

import React from 'react';

export const stateReducer = (state, action) => ({
  ...state,
  ...(typeof action === 'function' ? action(state) : action),
});

const useReducer = (initial, lazyInitializer = null) => {
  const [state, setState] = React.useReducer(stateReducer, initial, init =>
    lazyInitializer ? lazyInitializer(init) : init
  );

  return [state, setState];
};

export default useReducer;

打印稿

import React, { Dispatch } from "react";

type SetStateAction<S> = S | ((prev: S) => S);

type STATE<R> = [R, Dispatch<SetStateAction<Partial<R>>>];

const stateReducer = (state, action) => ({
  ...state,
  ...(typeof action === "function" ? action(state) : action),
});

const useReducer = <S>(initial, lazyInitializer = null): STATE<S> => {
  const [state, setState] = React.useReducer(stateReducer, initial, (init) =>
    lazyInitializer ? lazyInitializer(init) : init,
  );

  return [state, setState];
};

export default useReducer;

一般来说，你应该注意React状态下嵌套很深的对象。为了避免意外的行为，状态应该不可更改地更新。当你有深层对象时，你最终会为了不变性而对它们进行深层克隆，这在React中是相当昂贵的。为什么?

一旦你深度克隆状态，React将重新计算和重新渲染所有依赖于变量的东西，即使它们没有改变!

因此，在尝试解决问题之前，首先考虑如何将状态变平。一旦您这样做了，您就会发现有助于处理大型状态的方便工具，例如useReducer()。

如果你想过，但仍然确信你需要使用深度嵌套的状态树，你仍然可以使用useState()与immutable.js和Immutability-helper等库一起使用。它们使得更新或克隆深层对象变得简单，而不必担心可变性。

你想要创建状态的对象

let teams = {
  team: [
    {
      name: "one",
      id: "1"
    },
  ]
}

使团队的状态为对象

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

像这样更新状态

setState((prevState)=>({...prevState,team:[
     ...prevState.team,
     {
     name: "two",
      id: "2"
     }
]}))

更新后状态变为

{
  team: [
    {
      name: "one",
      id: "1"
    },
    {
      name: "two",
      id: "2"
    }
  ]
}

要渲染项目根据当前状态使用地图功能

{state.team.map((curr_team) => {
      return (
        <div>
           <p>{curr_team.id}</p>
           <p>{curr_team.name}</p>
        </div>
      )
})}