使用props来反应getInitialState

时间:2014-12-09 10:30:11

标签: reactjs

当设置组件的初始状态时,使用通过props传入的数据,我应该创建一个新对象,做类似......

getInitialState: function () {
    return {
        fieldData: JSON.parse(JSON.stringify(this.props.data))
    };
}

或者只是做安全......

getInitialState: function () {
    return {
        fieldData: this.props.data
    };
}

2 个答案:

答案 0 :(得分:7)

将道具转移到组件的状态被认为是一种不好的做法: http://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html

最好考虑采用不同的方法。您可以直接访问道具,并在更改道具时更新组件。

答案 1 :(得分:0)

自接受答案以来已经很多年了,我想补充一些可能在2014年不太清楚的观点:

道具纯粹初始化状态

从{em>特殊初始状态道具中seed state被认为是好的。在上面的示例中,您将拥有initialFieldData

class Form extends React.Component {
   state = { fieldData: this.props.initialFieldData };
   resetFieldData = () => 
      setState( () => ({ fieldData: this.props.initialFieldData }));

static getDerivedStateFromProps()docs

React 16.3-alpha引入了静态功能,允许您将常规道具映射到状态(替换componentWillReceiveProps)。有几点需要注意:

  1. 重要这是静态功能:您无法直接访问this,但您可以访问状态。在一些不寻常的情况下,人们可能会发现自己将实例值(例如refs)放入状态,这样就可以在那里访问它们了。
  2. 在装载上运行并且每次改变