Kaip dar galima atnaujinti būseną React (naudojant funkciją su ankstesne reikšme)?

React dažnai naudojama funkcija setState arba useState hook'e, norint atnaujinti būseną atsižvelgiant į ankstesnę reikšmę.

Be klasikinio varianto:

setState(prevState => ({ count: prevState.count + 1 }));

yra ir kitų būdų atnaujinti, pavyzdžiui:

• Naudojant atnaujinimo funkciją funkcionaliuose komponentuose su useState hook'u:

const [count, setCount] = useState(0);

setCount(prevCount => prevCount + 1);

• useReducer galima atnaujinti būseną per reducer, kuris gauna esamą būseną ir veiksmą:

function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });

• Klasėse galima naudoti callback setState, kad pasiektumėte ankstesnę būseną:

this.setState((prevState) => ({ count: prevState.count + 1 }));

Todėl atnaujinimas funkcija su ankstesne verte yra standartinis ir rekomenduojamas būdas, ypač kai nauja būseną priklauso nuo seno, siekiant išvengti asinchroninių atnaujinimų problemų.