Question

我想找到一种方法，将axios即将到来的响应与当前状态的属性进行比较，并且只有当它们不同时，然后将setState与响应一起使用以替换该属性。否则，请跳过setState的用法，因为它们是相等的

componentWillReceiveProps(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {

        if (nextProps.isReloading !== this.state.isReloading) {
            // HERE we just confirm to proceed and change this prop
            this.setState({
                isReloading: nextProps.isReloading,
            });
            getData('/some-end-point')
                    .then((response: any) => { 
                      const newItems = response.data;

已经记录并确认它们相等，但是下一行返回NO

                     this.state.items == newItems ? 'YES' : 'NO';

然后，只有在不同的情况下，才使用新状态更新当前状态

                    })
                    .catch((error: any) => {
                        console.log(error);
                    });
            return true;
        }

        return false;
    }

Answer 1

我的假设是newItems是一个数组，

仅将它们与==或===进行比较是行不通的（出于各种原因）

如果不替换this.state.items是否有好处？

如果不要调用setState（如果它们相同）非常重要，则可以通过循环数组并比较数组的每个元素来进行比较

newItems.length === this.state.items.length && newItems.sort().every((value, index)=> value === this.state.items.sort()[index]);

这假设您数组中的每个元素都是string或number，如果任何元素是另一个数组或对象，则您必须在每个元素中进行类似的比较< / p>

您可以使用lodash isEqual来做到这一点

从axios响应中更新State的属性（如果两者之间存在差异）

1 个答案: