ReactJs - 새로운 useStateRespect 후크의 preState?

ReactJs - 새로운 useStateRespect 후크의 preState?

저는 새로운 리액트 훅이 정말 마음에 들어서 현재 진행 중인 프로젝트에서 자주 사용하고 있습니다.prevState를 사용하고 싶은 상황이 발생하였습니다.useState훅은 잘 모르겠지만 어떻게 해야 할지 모르겠어요.

이런 걸 해봤는데 컴파일이 안 돼요.

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

(그런데 체크박스의 배열을 매핑하여 체크박스가 표시되어 있는 체크박스를 추적합니다.)

여기서 이 예를 따르려고 하는데setState기능.

도와줘서 고마워요!

객체의 경우 분산 연산자를 사용하여prevState의 범위 내에서setState불러.

const [object, setObject] = useState({
  firstKey: '',
  secondKey: '',
});

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

// object = {
//   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>

맵을 사용하려면 값을 조작하기 전에 맵을 복제해야 합니다.그렇지 않으면 원본이 변형되어Map그리고 리액트는 변이 가능한 것을 다루지 않는다.state.

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

업데이트된 작업 예:

state updater부터useState는 현재 상태를 갱신하기 위해 사용할 수 있는 이전 상태를 반환하는 콜백 패턴을 제공합니다.

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

파괴된 변수의 이전 상태가 이미 있습니다.someState

다음 작업을 수행할 수 있습니다.

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

이것을 사용하다

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

prevState 및 useState를 사용하여 단일 값을 업데이트하려면 다음과 같이 하십시오.

const [count, setCount] = useState(0) 
 
if(your-condition) {
  setCount((prevState) => prevState + 1)
}

  const [object,setObject] = useState({firstPropertie:'first',
    secondPropertie:'second'})

  setObject(prevState =>
  return{...prevState,secondPropertie:'newValue'})

언급URL : https://stackoverflow.com/questions/55823296/reactjs-prevstate-in-the-new-usestate-react-hook