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

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