Question

我想知道是否可以在单个事件中多次更新状态。假设我有一种形式，其中可能需要根据以下示例中的某些逻辑使用多个inputs来更新单个状态：

在父组件中定义的状态：

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并将其添加到状态对象。有没有一种方法可以添加所有可能的if语句的输出？

Answer 1

您可以使用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 2

我会先构建数组，然后更新一次状态，就像这样：

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

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

  props.setState(result);
}

Answer 3

如果条件相反，请不要全部使用多个setState()，而是创建组合的更新对象，然后合并为状态

例如

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

如何使用React useState挂钩在同一事件上多次更新状态？

3 个答案: