Как обновить состояние несколько раз на одном и том же событии, используя React useState hook? - PullRequest
1 голос
/ 08 апреля 2020

Мне было интересно, возможно ли обновить состояние несколько раз в одном событии. Скажем, у меня есть форма, в которой может потребоваться несколько inputs для обновления одного состояния на основе некоторой логики c, как показано в следующем примере:

Состояние, определенное в родительском компоненте:

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?

Ответы [ 3 ]

1 голос
/ 08 апреля 2020

Сначала я собрал бы массив, а затем обновил бы состояние, что-то вроде этого:

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

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

  props.setState(result);
}
1 голос
/ 08 апреля 2020

Вы можете использовать форму обратного вызова 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
)};

Это гарантирует, что перекрывающиеся вызовы не приведут к потере данных.

0 голосов
/ 08 апреля 2020

Не используйте несколько 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]);
 }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...