Блог

У меня есть одно состояние внутри моего компонента React, которое имеет такую структуру {a: {x: 0}, b: {x:0}} . Во время работы мне нужно запустить несколько запросов к серверу, чтобы запросить данные для обновления состояния, и это необходимо обновить в состоянии. Поскольку номер записи в базе данных довольно большой, мне приходится запускать несколько раз

Если мне это нравится

 request_data(e) {
   ['a', 'b'].forEach((k) => {
      // do not mutate the state directly
      let new_state = _.extend({}, state);

      request(params, (err, res) => {
         // set result to the new_state 
         new_state = res; 
         // update the original state
         this.setState(newState);
      })
   });
}
  

внутри обратного вызова второй запрос не будет иметь данных первого запроса в тот момент, когда он запрашивает и обновляет исходное состояние пустым значением для первой ветви структуры состояния.

Одним из простых решений является прямое обновление исходного состояния, но я не думаю, что это хорошая идея. Я планирую интегрировать redux позже, но на данный момент, поскольку текущая база кода довольно большая, лучше выполнять постепенную миграцию. Однако я не хочу напрямую изменять исходное состояние, поскольку это не redux так. Есть предложения по преодолению этой проблемы?

Я предполагаю, что, судя по тому, как написан ваш код, вы используете классы es6 для своего компонента? В таком случае, надеюсь, этот лакомый кусочек поможет:

 import React from 'react'

class MyComponent extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      foo:'bar'
    }
  }

  request_data = (e) => {
    ['a', 'b'].forEach((k) => {
      // do not mutate the state directly
      let new_state = _.extend({}, state);

      request(params, (err, res) => {
         // set result to the new_state 
         // update the original state
         this.setState(foo:res.foo)
      })
    });
  }

  render() {
    return (
      // component code here
    )
  }
}

export default MyComponent
  

Обратите внимание, что я использую функцию со стрелкой для части request_data…это делается для того, чтобы избежать необходимости привязывать функцию к this переменной внутри конструктора.

Обновить:

Я все еще не совсем уверен, что понимаю, с какой проблемой вы столкнулись здесь … но если вы не хотите использовать redux прямо сейчас, вы можете использовать метод компонента контейнера. По сути, основная задача вашего компонента контейнера — управлять данными и ничего не делать, кроме как передавать его обновленное состояние дочернему компоненту в качестве реквизита. Что-то вроде этого:

 class MyComponentContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      a: {
        x: 0
      }, 
      b: {
        x:0
      }
    }
  }

  componentWillMount() {
     ['a', 'b'].forEach((k) => {
        request(params, (err, res) => {
           this.setState({
            a: res.a,
            b: res.b
           });
        })
     });
  }

  render() {
    return (
      <MyComponent data={this.state} />
    )
  }
}

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
  }

  render() {
    return (
      <div>
        {/* display stuff here */}
      </div>
    )
  }
}

export default MyComponentContainer