Question

我正在使用React和redux，并且有一个场景。我有四个动作，其中之一取决于其他两个动作。如果我们有this.props.fetch1()，this.props.fetch2()，this.props.fetch3()，首先我需要接收this.props.fetch1()和this.props.fetch2()的结果，然后使用id每个结果以通过redux向服务器发出请求，如下所示：

1.
  this.props.fetch1()
  this.props.fetch2()

2.
  this.props.fetchResult1.id1
  this.props.fetchResult2.id2

3.
  this.props.fetch3(this.props.fetchResult1.id1, this.props.fetchResult1.id2)

4.
  this.props.fetchResult3

5.
  show the list on the page

然后使用this.props.fetchResult3（这是一个数组），我将在显示页面时列出要显示在页面上的列表。

问题在于，由于此操作是异步的，因此结果不准备使用。我使用shouldComponentUpdate进行渲染，直到结果准备就绪为止，但是它阻止了其他部分的状态更新，即使我比较状态以进行更新，它也会重新渲染该组件，在我的情况下，这将导致重置页面上的字段值每次状态更改。（我有2个文本输入和一页上的提交复选框）

shouldComponentUpdate(nextProps, nextState, nextContext) {
        return !isEqual(nextProps.fetchResult1, this.props.fetchResult1) ||
               !isEqual(nextProps.fetchResult2, this.props.fetchResult2) ||
               !isEqual(nextState.fetchResult2, this.state.fetchResult2)

    }


componentDidMount() {
        this.callfetch1fetch2();
    }


componentDidUpdate(prevProps, prevState, snapshot) {
        if (prevProps.fetchResult1 === this.props.fetchResult1 && !this.props.fetchResult2) {
            this.callfetch1fetch2();
        } else {
            this.callfetch3();
        }
}

我想知道处理此问题的最佳方法，既可以防止重新渲染，又可以正确更新状态。

预先感谢您的任何建议。

Answer 1

您可以使用：

Promise.all([
  this.props.fetch1(),
  this.props.fetch2()
]).then(response => {
// do something
})

或创建一个异步/等待功能

async function getResults() {
   let fetchResult1 = await this.props.fetch1(),
   let fetchResult2 = await this.props.fetch1()
}

Answer 2

在这种情况下使用承诺。

您的组件将仅调用fetchAll和componentDidMount中的单个componentDidUpdate（您需要在if中的某些componentDidUpdate中调用它-仅在从服务器重新加载数据所必需的。）

如果您不需要显示fetchResult3和fetchResult1，则仅将fetchResult2映射到您的组件。

function fetchAll() {
    return (dispatch) => {
        return Promise.all([
            dispatch(fetch1()),
            dispatch(fetch2())
        ]).then(([fetchResult1, fetchResult2]) =>
            dispatch(fetchResult3(fetchResult1.id, fetchResult2.id))
        );
    };
}

组件中不必要的额外重新渲染会导致删除字段的值

2 个答案: