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

Question

我想知道是否可以在一个事件中多次更新 state。 假设我有一个表单，其中可能需要使用多个inputs来更新单个 state 基于以下示例的一些逻辑：

State 在父组件中定义：

import React, { useState } from "react";

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

export default ParentComponent;

State 在子组件中更新：

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语句的 output onSubmit并添加到 state object。 if添加语句，有没有办法让 output 尽可能多地添加？

Answer 1

我会先构建数组，然后更新 state 一次，如下所示：

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

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

  props.setState(result);
}

Answer 2

您可以为此使用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
)};

这确保重叠调用不会导致数据丢失。

Answer 3

如果条件不使用多个setState()而是创建组合更新 object 然后合并到 state

例如

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]);
 }