Javascript 如何使用React-useState钩子对同一事件多次更新状态？

我想知道是否有可能在一个事件中多次更新状态。假设我有一个表单，其中可能需要使用多个

输入

来根据一些逻辑更新单个状态，如以下示例：

父组件中定义的状态：

import React, { useState } from "react";

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

export default ParentComponent;

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;

---

使用此方法时，只有第一个

if

语句的输出返回

onSubmit

，并添加到state对象。如果添加了

语句，是否有办法使所有可能的
语句的输出都被添加？
您可以使用
setState
的回调形式：

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

确保重叠调用不会导致数据丢失。
不要在所有if条件中使用多个
setState（）
，而是创建一个组合更新对象，然后合并到状态

e、 g

我会先构建阵列，然后更新一次状态，类似这样：

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

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

  props.setState(result);
}

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

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

  props.setState(result);
}