Question

当我使用Chrome控制台检查render方法中组件的状态时，我会获得最新的状态值。

但是，当我在div中显示此状态时，我会获得原始状态值，而不是更新的状态值。在React Developer Tools中，状态不会在那里更新。我甚至尝试在true方法中返回shouldComponentUpdate()，但它没有帮助。

这是一个简化的例子：

＆＃13;

var MyComponent = React.createClass({  
  getInitialState() {
    return { myState: "value0" };
  },
  componentWillReceiveProps(nextProps){
    if(this.state.myState != nextProps.myProp){
      this.setState({
          myState: nextProps.myProp
      }); 
    }
  },
  render: function() {
    console.log("OK - up to date myState =",this.state.myState);
    return (
        <div>NOK - original state instead of updated one: {this.state.myState}</div>
    );
  }
});

ReactDOM.render(<MyComponent myProp={"myProps"} />, document.getElementById("app"));

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

＆＃13;

您是否有任何解释为什么myState函数中return之前render的值是正确的，而return之后的值是不正确？

Answer 1

那是因为你用静态值初始化你的状态，你必须做这样的事情：

getInitialState() {
    return { myState: this.props.myProp };
},

请参阅下面的基本示例：

＆＃13;

class MyComponent extends React.Component { 
  constructor(props) {
    super(props)
    this.state = { myState: props.myProp }
  }
  
  componentWillReceiveProps(nextProps){
    if(this.state.myState != nextProps.myProp){
      this.setState({
          myState: nextProps.myProp
      });
    }
  }
  
  render () {
    console.log("OK ",this.state.myState)
    return (
        <div> NOK {this.state.myState} </div>
    );
  }
}

class App extends React.Component {
   constructor(props) {
      super(props)
      this.state = {
        value: 0
      }
   }
   render () {
      return <div>
       <button onClick={e => this.setState({ value: this.state.value + 1 }) }> Increase </button>
       <MyComponent myProp={this.state.value} />
       </div>
   }
}

ReactDOM.render(<App />, document.getElementById('app') )

＆＃13;

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
</head>
<body>
<div id='app'></div>

</body>
</html>

＆＃13;

Answer 2

我想我可以理解为什么你有解决问题的麻烦。

如果您想通过更改父级中的MyComponent来更改myProp中的值，则可以使用componentWillReceiveProps进入正确的轨道。这是你想要做的：

使用myProp

getInitialState

使用componentWillReceiveProps根据父母传递的新道具相应地改变状态（但问题是：你如何管理你当前状态和新道具之间的差异？也许你不会这样做？如果已被修改，则想要重置状态）

然后你的代码应该可以工作。

我附上了如何做的例子：

https://jsfiddle.net/x3ef71L4/4/

Answer 3

使用tabBarOptions: { tabStyle: { width: 'auto' } }代替构造函数为我工作

在传递道具时ReactJS组件不会重新渲染

3 个答案: