状态更新，但React组件没有

Question

I have the next react code inside a render function:

         {this.state.info}
         <MyComponent index={0}
              selectedInfo={this.state.info} 
         />

if I pass a string to MyComponent like:

         <MyComponent index={0}
              selectedInfo={"Hello"} 
         />

then I will see Hello. However, if I use:

         {this.state.info}
         <MyComponent index={0}
              selectedInfo={this.state.info} 
         />

I will see nothing even if {this.state.info} prints Hello (ie this.state.info == 'Hello'). I suspect this is a problem related with /react's rendering system but i have no idea how to trace this.

In the beginning this.state.info is ''. After an axios call that takes like 2-3 seconds this state is updated but MyComponent does not reflect that change even when {this.state.info} shows hello (ie this.state.info got updated by the axios call using setState)

Any suggestions? Thx

Answer 1

This probably happens because a component doesn't render when props change, but only when its state changes.

A solution may be to check for a change in props in componentWillReceiveProps, and to call setState if render should be done.

Answer 2

Is not easy to say what exact problem is cause you didnt post enough code...but here is a working example, i believe doing what you trying to do...ultimately like other guys have said, just need to update state via "this.setState()" and listening components will pick up the update...

 const MyComponent = ({selectedInfo, index}) => { return ( <div style={{border: '1px solid black', padding: '10px'}}> <h4>{selectedInfo}</h4> <p>{index}</p> </div> ) } class App extends React.Component{ constructor(props){ super(props); this.state = {selectedInfo: 'intial', count: 0}; this.btnPressed = this.btnPressed.bind(this); } btnPressed(){ this.setState({selectedInfo: 'button pressed => '+this.state.count, count: this.state.count+1}); } render() { return (<div> <MyComponent index={0} selectedInfo={this.state.selectedInfo}/> <button type="btn" onClick={this.btnPressed}>State Change working</button> </div>) } } console.log(document.getElementById('app')); ReactDOM.render(<App />, document.getElementById('app')); 

 <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>