Question

我的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，但此时，由于当前的代码库非常大，逐渐迁移更好。但是，我没有＆＃39;想要直接改变原始状态，因为它不是redux方式。有什么建议可以解决这个问题吗？

Answer 1

我假设你的代码编写方式，你正在为你的组件使用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，你可以使用容器组件方法。基本上，容器组件的主要工作是管理数据，除了将其更新状态作为props传递给子组件之外什么都不做。像这样：

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

React

1 个答案: