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

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/await

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

Answer 2

在这种情况下使用 Promise。

您的组件将仅在 componentDidMount 和 componentDidUpdate 中调用单个 fetchAll（您需要在 componentDidUpdate 中的某些 if 中执行此操作 - 仅当需要从服务器重新加载数据时）。

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

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