Question

如果我在React渲染中使用复杂对象Structure，我怎样才能避免在getInitialState方法中重新定义该结构

var UserGist = React.createClass({
  getInitialState: function() {
    return {
      user:{
        section: {
          country: 'Iran'
        }
      },
      lastGistUrl: ''
    };
  },
....
....
  render: function() {
    return (
      <div>
        {this.state.user.section.country}'s Amex Initial
        <a href={this.state.lastGistUrl}>here</a>.
      </div>
    );
  }
});

现在问题是所用对象的实际结构非常庞大

user:{
 section: {
   .....
   25 levels of nesting
   .....{
         country: 'Iran'
        }
   }
}

并且该对象来自后端，因此如何避免在getInitialState()

中定义整个对象结构

Answer 1

首先，国家应该是浅薄的。你不应该有深层对象作为道具或陈述。

接下来，你为什么要这样做？是不是因为你没有得到一堆＆＃34; xx没有定义＆＃34;初始渲染上的错误？如果是这样，为什么不在user: {}中声明getInitialState，并在渲染代码周围包含if (!_.isEmpty(this.state.user))条件？

或者，由于数据来自服务器，重新声明此结构可能是件好事。您可以使用getInitialState创建占位符数据，直到显示真实对象。

另外，请注意，setState只能进行浅层替换。如果更改user对象的任何属性或子属性，则需要克隆它，更改属性，然后调用setState({user: clonedAndUpdatedUser})。或者，只需致电forceUpdate。

你应该只是尝试让你的道具和状态变浅。

祝你好运！

如何在React

1 个答案: