如何在reactjs中更新对象数组

如何在reactjs中更新对象数组,reactjs,Reactjs,我不知道如何在我的应用程序中正确更改状态。例如,我希望将特定帖子的'modalStatus'键更改为true,我应该在showModal函数中编写什么?我有以下数据结构: class App extends React.Component { constructor() { super(); this.state = { posts: [ { 'author': 'Adolf Hitler', 'img': 'http://www.jewishvirtuall

我不知道如何在我的应用程序中正确更改状态。例如,我希望将特定帖子的'modalStatus'键更改为true,我应该在showModal函数中编写什么?我有以下数据结构:

class App extends React.Component {
constructor() {
super();
this.state = {
  posts: [
    {
      'author': 'Adolf Hitler',
      'img': 'http://www.jewishvirtuallibrary.org/images/hitler1.jpg',
      'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti incidunt consectetur omnis molestiae exercitationem accusamus nostrum quia libero esse maxime aliquid ducimus, placeat rem commodi. Animi cum aut odit.',
      modalStatus: false
    },
    {
      'author': 'Iosif Stalin',
      'img': 'http://xn--h1aagokeh.xn--p1ai/wp-content/uploads/2016/07/46432404.jpg',
      'content':'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti incidunt consectetur omnis molestiae exercitationem accusamus nostrum quia libero esse maxime aliquid ducimus, placeat rem commodi. Animi cum aut odit.',
      modalStatus: false
    },
    {
      'author': 'Napoleon Bonapard',
      'img':'http://cdn.history.com/sites/2/2015/04/hith-6-things-you-should-know-about-napoleon-E.jpeg',
      'content':'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti incidunt consectetur omnis molestiae exercitationem accusamus nostrum quia libero esse maxime aliquid ducimus, placeat rem commodi. Animi cum aut odit.',
      modalStatus: false
    },
    {
      'author': 'Vladimir Putin',
      'img':'http://realnienovosti.com/images/148795554214.jpg',
      'content':'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti incidunt consectetur omnis molestiae exercitationem accusamus nostrum quia libero esse maxime aliquid ducimus, placeat rem commodi. Animi cum aut odit.',
      modalStatus: false
    }
  ]
};
以及负责更改状态的功能:

showModal () {
 this.setState(do something)
 }

你可以这样做:

showModal () {
  var item = this.state.posts[0];
  item.modalStatus = true;
  this.setState({});
}

之后-React将根据新的状态对象重新渲染组件。

您可以这样做:

showModal () {
  var item = this.state.posts[0];
  item.modalStatus = true;
  this.setState({});
}

之后-React将根据新的状态对象重新渲染组件。

这样编写,将索引传递给要编辑其值的函数

showModal (index) {
   var posts = JSON.parse(JSON.stringify(this.state.posts));
   posts[index].modalStatus = true;
   this.setState({posts});
}
检查一下

或者,您也可以使用:

this.setState({
    posts: update(this.state.posts, {0: {modalStatus: {$set: true}}})
})

这样写,将索引传递给要编辑其值的函数

showModal (index) {
   var posts = JSON.parse(JSON.stringify(this.state.posts));
   posts[index].modalStatus = true;
   this.setState({posts});
}
检查一下

或者,您也可以使用:

this.setState({
    posts: update(this.state.posts, {0: {modalStatus: {$set: true}}})
})