如何使用 React useState 钩子在同一事件上多次更新 state？

Question

I was wondering if it's possible to update state multiple times in a single event. Say I have a form where multiple inputs may need to be used to update a single state based on some logic like the below example:

State defined in parent component:

import React, { useState } from "react";

function ParentComponent() {
   const [state, setState] = useState([]);
   return (
      <ChildComponent state={state} setState={setState} />
   )};

export default ParentComponent;

State updated in child component:

import React, { useState } from "react";

function ChildComponent(props) {
   const onSubmit = data => {
      if(someLogicHere) {
         props.setState(_ => [...props.state, data]);
      }
      if(someOtherLogicHere) {
         props.setState(_ => [...props.state, data]);
      }
   }
   return (
      //Form goes here
)};

export default ChildComponent;

When using this method, only the output of the first if statement is returned onSubmit and added to the state object. Is there a way to have the output from all possible if statements be added?

Answer 1

I would build the array first then update the state once, something like that:

const onSubmit = data => {
  let result = [...props.state];

  if(someLogicHere) {
    result.push(data);
  }
  if(someOtherLogicHere) {
    result.push(data);
  }

  props.setState(result);
}

Answer 2

You can use the callback form of setState for that:

function ChildComponent(props) {
   const onSubmit = data => {
      if(someLogicHere) {
         props.setState(state => [...state, data]);
// −−−−−−−−−−−−−−−−−−−−−^^^^^−−−−−−−−^^^^^
      }
      if(someOtherLogicHere) {
         props.setState(state => [...state, data]);
// −−−−−−−−−−−−−−−−−−−−−^^^^^−−−−−−−−^^^^^
      }
   }
   return (
      //Form goes here
)};

That ensure that overlapping calls don't result in lost data.

Answer 3

Don't use multiple setState() in all if conditions instead create a combined update object and then merge into state

eg

const onSubmit = data => {
   const data = {};
    if(someLogicHere) {
       data['a'] = 1;
    }
    if(someOtherLogicHere) {
       data['b'] = 2;
    }
    if(anotherLogic) {
       data['b'] = data['b'] + 10;
    }
    props.setState(_ => [...props.state, data]);
 }