在React中管理嵌套状态的好方法

Question

编辑：我重写了这个问题，以澄清我想要的--感谢到目前为止回复我的人，帮助我磨练它。

{
  'authors' : {
    234 : {
      'name' : 'Alice Ames',
      'bio' : 'Alice is the author of over ...',
      'profile_pic' : 'http://....'
    },
    794 : {
      'name' : 'Bob Blake',
      'bio' : 'Hailing from parts unknown, Bob...',
      'profile_pic' : 'http://....'
    },
    ...more authors...
 },
 'publications' : {
    539 : {
      'title' : 'Short Story Vol. 2',
      'author_ids' : [ 234, 999, 220 ]
    },
    93  : {
      'title' : 'Mastering Fly Fishing',
      'author_ids' : [ 234 ]
    },
    ...more publications...
  }
}

在这个人为的示例中，状态有两个主要区域，分别由authors和publications键访问。

authors键指向一个以作者ID为键的对象，该ID指向一个带有一些作者数据的对象。

publications键指向一个对象，该对象键控于具有某些发布数据的发布的ID以及一个作者数组。

...
<App>
  <AuthorList authors={this.state.authors} />
  <PublicationList authors={this.state.authors} publications={this.state.publications} />
</App>
...

...
class AuthorList extends React.Component {
  render() {
    let authors = this.props.authors;
    return (
      <div>
        { Object.keys( authors ).map( ( author_id ) => {
          return  <Author author={authors[author_id]} />;
        }
      </div>
    );
  }
}
...

...
class PublicationList extends React.Component {
  render() {
    let publications = this.props.publications;
    let authors = this.props.authors;
    return (
      <div>
        { Object.keys( publications ).map( ( publication_id ) => {
          return  <Publication publication={publications[publication_id]} authors=authors />;
        }
      </div>
    );
  }
}
...

从这个答案来看：

reactJS-是否在调用“setstate”时调用render？

React组件的render()函数将在其状态或其任何父级的状态发生变化时被调用-无论该状态变化是否与该组件的道具有关。可以使用ShouldComponentUpdate更改此行为。

Answer 1

下面是一种使用对象扩展语法高效且可读的方法。

let state = {
    authors : {
        ...this.state.authors, 
        [ givenId ] : { 
            ...this.state.authors[ givenID ], 
            bio : newValue 
        }
    }  
}
this.setState(state)

请记住，在JSX中映射项时，必须传递一个“键”作为道具。

这主要是因为react所做的协调（react的“不同”算法来检查发生了什么变化）检查映射的jsx（大致命名为jsx）的键。

无论如何，在reacts state/SetState或redux中管理状态与“和解”无关。

在这两种情况下，您都可以使用“对象扩展语法”语法更改嵌套数据的部分。

您所关心的就是将“相同”的键传递给映射的JSX。因此，尽管react重新发送，但它不会尝试对不必要的部分进行dom更新，这是昂贵的。