比较 2 个对象数组，一个与旧数据，一个与新数据，然后根据新数据更新状态

Question

我有一个用户在这个表单的页面上有一些数据：

[{ name: 'Jack', id: 1 }, { name: 'Ellen', id: 2 }, {name: 'Nick', id: 3}]

Apollo 查询会加载此数据。用户可以使用表单向页面添加名称或从页面中删除名称。 Apollo 突变处理添加或删除请求。 RefetchQueries 在突变后被调用，状态被更新并且名称列表被重新呈现。

问题是，如果我添加一个名称，refetchQueries 将返回所有 4 个对象，作为回报，所有 4 个对象都设置为状态。

[{ name: 'Jack', id: 1 }, { name: 'Ellen', id: 2 }, {name: 'Nick', id: 3}, { name: 'Mary', id: 4 }]

我想了解如何获取新旧数据之间的差异。然后从状态数组中添加或删除正确的对象，而不是完全重置状态。使用的 id 将始终是唯一的。

loadData = (names, that) => {

        that.setState({ loading:true });

        let data = {};
        data.names= [];

        const oldNames = that.state.names;

        names.map(name=> (
            data.names.push({ name: name.name, id: name.id })
        ));

       that.setState({names: data.names, loading: false });
}

上面的函数在 componentWillUpdate 中被这样调用：

componentWillUpdate(nextProps, nextState) {
    loadData(nextProps.names, this);
}

我正在尝试更改此功能如下：

updateData = (names, that) => {

        let data = {};
        data.names = [];

        const oldNames = that.state.names ;

        names.map(name => (
            data.names.push({ name: name.name, id: name.id })
        ));

        let difference = _(data.names)
            .differenceBy(oldNames, 'id', 'name')
            .map(_.partial(_.pick, _, 'id', 'name'))
            .value();

        if (data.names.length > oldNames.length)
        that.setState(prevState => ({
            names: [...prevState.names, {name: difference[0].name, id: difference[0].id}]
        }))
}

但是用这种方式找到新旧数据的差异，感觉不是很好。我已经尝试了Compare 2 arrays which returns difference 的解决方案，但我无法让它工作。我希望你能帮助我介绍一种更好的方法来找到差异。在上面的示例中，我使用了 lodash，但这不是必需的。我也想知道有没有更好的方法。例如，直接从 Apollo 突变中获取结果并将此结果添加到 State。

更新节点映射：

render() {

        if (this.state.loading) { return <div>Loading...</div> }

        const links = this.state.links.map( (link,i) => {
            return (
                <Link
                    linkClass={this.props.linkClass}
                    key={link.target+i}
                    data={link}
                />);
        });

        const nodes = this.state.nodes.map( (node) => {
            return (
                <Node
                    nodeClass={this.props.nodeClass}
                    data={node}
                    label={node.label}
                    key={node.id}
                    onClick={this.onClickHandler.bind(this, node)}
                />);
        });

        return (
            <div className="graphContainer">
                <svg className="graph" width={FORCE.width} height={FORCE.height}>
                    <g >
                        {links}
                    </g>
                    <g >
                        {nodes}
                    </g>
                </svg>
            </div>
        );
    }
}

Answer 1

当你调用this.setState({ names: newArray })时，newArray必须是一个新构造的数组（因为你不能直接改变状态），所以无论你是根据差异构造这个数组还是只使用结果都没有区别来自 API 调用。

换句话说，setState({ names: [1, 2, 3] }) 或 setState({ names: [...someOldState, 3] }) 之间没有区别，因为在这两种情况下您仍在将 names 设置为新建的数组，因此您尝试计算差异不会以任何方式帮助您的意图.

React 优化了仅重新渲染具有更改键的组件，因此您只需确保在映射的组件中提供了 unique and stable 键。

不过，这种优化是在虚拟 DOM 级别完成的。如果您想避免 render 在未更改的 Link 和 Node 组件中被调用，则需要将它们声明为 PureComponent，或者如果 props 不浅，则需要使用 shouldComponentUpdate 函数。