ReactJS - prevState in the new useState React hook?

Question

I really like the new React hooks and I'm using them frequently for a project I'm working on. I'm coming across a situation where I want to use the prevState in the useState hook, but I'm not really certain on how to do this.

I've tried something like this, but it fails to compile.

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

(by the way, this is to map an array of checkboxes to keep track of the ones that are check marked)

I'm trying to follow this example here, but without using the setState function.

Thanks for the help!

Answer 1

为了使用Maps，您需要在操作值之前克隆它。否则，它会改变原始的Map并且 React 不处理 mutatable state。

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

更新的工作示例：

Answer 2

对于对象，您可以prevState在setState呼叫中使用价差运算符。

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

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

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

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

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

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

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

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")
);

Answer 3

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

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

Answer 4

用这个

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

Answer 5

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

所以你可以这样做：

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