ReactJS-新的useState React钩子中的prevState吗？

Question

我真的很喜欢新的React hooks，并且在我正在从事的项目中经常使用它们。我遇到一种情况，我想在useState挂钩中使用 prevState ，但是我不确定如何执行此操作。

我已经尝试过类似的操作，但是无法编译。

const [ someState, setSomeState ] = useState( new Map() )
setSomeState( prevState.someState.set( key, value ) )

（顺便说一句，这是映射一个复选框数组以跟踪被选中标记的复选框）

我正在尝试遵循此示例here，但不使用setState函数。

感谢您的帮助！

Answer 1

对于对象，您可以使用传播运算符在prevState调用中使用setState。

const [stateObject, setObjectState] = useState({
  firstKey: '',
  secondKey: '',
});

setObjectState((prevState) => ({
  ...prevState,
  secondKey: 'value',
}));

// stateObject = {
//   firstKey: '',
//   secondKey: 'value',
// }

下面的代码段显示了使用prevState设置对象状态的示例。

const {useState} = React;

const Example = ({title}) => {
  const initialState = {
    firstKey: 'empty',
    secondKey: 'empty',
    thirdKey: 'not empty',
  }
  const [object, setObject] = useState(initialState);
  
  const withPrevState = () => {
    setObject((prevState) => ({
      ...prevState,
      secondKey: 'not empty',
    }));
  }

  return (
    <div>
      <h5>Updates Second key to 'not empty'</h5>
      <p>First key: {object.firstKey}</p>
      <p>Second key: {object.secondKey}</p>
      <p>Third key: {object.thirdKey}</p>
      <button onClick={withPrevState}>
        Update with prevState
      </button>
      <button onClick={() => {setObject({secondKey: 'not empty'})}}>
        Update without prevState
      </button>
      <button onClick={() => {setObject(initialState)}}>
        Reset
      </button>
    </div>
  );
};

// Render it
ReactDOM.render(
  <Example />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

state updater中的

useState提供了一种回调模式，该模式可返回您之前的状态，可用于更新当前状态

const [ someState, setSomeState ] = useState( new Map() )
setSomeState(prevState => prevState.set( key, value ) )

Answer 3

您已经在销毁变量中拥有先前的状态：someState

因此您可以这样做：

const [ someState, setSomeState ] = useState( new Map() )
setSomeState( someState.set( key, value ) )

Answer 4

使用这个

const [setSome, setSomeState] = useState({thing: 'loding', count: 1});
setSomeState(prev => ({...prev, count: prev.count + 1}));

Answer 5

Hmmm，似乎是一个useState和Map s的错误。在更新state时，它不会重新呈现该功能以反映状态变化（除非已设置其他state和/或已调用类似forceUpdate的功能）。

一种替代方法是暂时添加并直接控制checked属性。

为了使用Map对象，您需要在操作值之前对其进行克隆。否则，它将变异原始的Map对象，而useState则无法处理可变的state。

const handleChange = useCallback(({ target: { name, checked } }) => {
  setCheckbox(prevState => {
    return new Map(prevState).set(name, checked);
  });
}, []);

更新的工作示例：