从 axios 响应中更新 State 的属性，如果它们之间存在差异

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，如果任何元素是另一个数组或对象，则必须在每个元素中进行类似的比较

我假设你可以使用 lodash isEqual 来做到这一点