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

我在使用我的React应用程序中的react-addons-update npm软件包，并且特别想使用update()方法在对象数组内插入新对象。我有这样的结构作为我的组件的状态的一部分：react-addons-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 - 以防万一有一些怪癖阻止这个帮助函数的工作。

来源

2016-08-24 JoeTidee

什么是更新方法也被提到？块是不可变的列表吗？如果是这样，我认为你需要使用'updateIn'，你需要在将数组传递给'updateIn'方法之前分别重建数组。 – RocketGuy3

update（）方法是react-addons-update npm包中的一个辅助函数。 – JoeTidee

看起来像你的代码应该工作。它可能与更新不同有关吗？如果你要记录你的更新函数，结果如何？ –

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

来源

2016-08-25 08:46:12 goldbullet

我使用console.log打印出更新后的'块'的状态，所以有一个关键在这种情况下不相关.. – JoeTidee

您的console.log在componentDidUpdate或渲染？ setState异步更新状态，所以状态可能不会立即在setState之后更新。 – goldbullet

根据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?

来源

2016-08-25 16:53:57 JoeTidee

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

回答

相关问题