Question

我正在使用getDerivedStateFromProps来捕获道具并将其置于本地状态。这是我正在尝试做的一个例子。这是我的状态设置。

constructor(props) {
    super(props);
    this.state = {
        dataSource: [],
        sort: {
            column: "",
            descending: false,
        },
    };
}

这是我使用getDerivedStateFromProps的方式。

static getDerivedStateFromProps(props, state) {
        if (props.sort !== state.sort) {
            const dataSource = sortData(props.dataSource, props.sort, props.sortRows);
            return {
                dataSource,
            };
        }
        return null;
    }

这里的想法是sort对象包含有关如何排序的信息，包括要排序的列以及方向等信息。

现在，为了避免在render方法中对数据进行不必要的排序，我正在捕获排序设置并将其置于状态，然后想到的过程是，仅当排序设置具有改变了。通过将设置与我当前的状态进行比较，可以确定设置是否已更改。

我的问题是this.state.sort的值和props.sort的值是否有可能相同，但是由于它们在内存中的不同位置，它们仍然不相等。换句话说，假设我的组件具有其他一些更改，并且组件再次使用getDerivedStateFromProps方法进行渲染，我想知道我的比较是否会因为这里的state和props而中断总是不同的对象。

任何清晰度都会带来巨大帮助。

注意：我知道这里的正确方法是不使用getDerivedStateFromProps，而是记住我的道具。我从这里走了一条错误的道路，现在想继续这样下去，以便加深了解。

Answer 1

示例中的

props.sort和state.sort永远不相等。

1）道具和状态不能指向一个记忆。道具是构造函数参数，因此它们来自类对象之外，而状态是类属性。它们是完全不同的变量。

2）您不能通过'==='比较两个JS对象。您必须自己指定“等于”或“比较”功能。

希望对您有帮助！

Answer 2

为此，您应该使用JSON.stringify来比较两个对象，不能使用简单的"="运算符来比较对象，必须选择JSON.stringify或手动进行操作。

static getDerivedStateFromProps(props, state) {
        if (JSON.stringify(props.sort) !== JSON.stringify(state.sort)) {
            const dataSource = sortData(props.dataSource, props.sort, props.sortRows);
            return {
                dataSource,
            };
        }
        return null;
    }

道具和状态可以指向相同的内存引用吗？

2 个答案: