Question

我在我的React应用程序中使用react-addons-update npm包，并且特别希望使用update()方法在对象数组的深处插入新对象。我将此结构作为组件状态的一部分：

...
constructor(props) {
    super(props);
    this.state = {
        blocks: [
            {
                block_title: "some title",
                items: [
                    {
                        item_title: "foo"
                    },
                    {
                        item_title: "bar"
                    }
                ]
            },
            {
                ...
            }
        ]
    };
}
...

我希望在第一个和第二个项目之间的items数组中插入一个新项目。

我试过这个：

...
insertItem(){
    let obj = {
        item_title: "in between foo and bar"
    };
    this.setState({
        blocks: update(this.state.blocks, {
            [0]: {
                items: {$splice: [[1, 0, obj]]}
            }
        })
    });
}
...

但这似乎不起作用（也没有抛出任何错误）。有什么想法吗？

P.S。我在Meteor应用程序中使用React - 以防万一有一些怪癖阻止这个辅助函数工作。

Answer 1

无法在组件中看到您的其他方法，但请尝试确保为您添加的项目呈现的元素上的关键道具是唯一的。

Answer 2

根据goldbullet的评论，setState异步更新组件状态。我发现在代码块中setState之后运行的进程实际上是在更新之前获取组件状态。因此，原始问题中的上述语法对于在对象数组深处插入对象是正确的。

作为解决方案，我使用了setState回调选项，如下所示：

...
insertItem(){
    let obj = {
        item_title: "in between foo and bar"
    };
    this.setState({
        blocks: update(this.state.blocks, {
            [0]: {
                items: {$splice: [[1, 0, obj]]}
            }
        })
    },function(){
        // DO SOMETHING HERE!!
    });
}
...

这篇文章Why calling react setState method doesn't mutate the state immediately?

中也提到了这一点

react-addons-update - 如何在对象数组中深入插入对象？

2 个答案: