Question

我在渲染函数中有下一个反应代码：

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

如果我将字符串传递给MyComponent，如：

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

然后我会看到你好。但是，如果我使用：

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

即使{this.state.info}打印Hello（即this.state.info =='Hello'），我也什么都看不见。我怀疑这是与/ react的渲染系统有关的问题，但我不知道如何追踪它。

一开始this.state.info是''。在一个需要2-3秒的axios调用之后，这个状态会更新，但即使{this.state.info}显示hello（即this.state.info通过使用setState的axios调用更新），MyComponent也不会反映出这种变化< / p>

有什么建议吗？ THX

Answer 1

这可能是因为当props更改时组件不会呈现，但只有在其状态发生变化时才会呈现。

解决方案可能是检查componentWillReceiveProps中props的更改，并在应该执行render时调用setState。

Answer 2

不容易说出确切的问题是什么导致你没有发布足够的代码......但这是一个有效的例子，我相信做你想做的事情......最终像其他人说的那样，只需要更新状态通过“this.setState（）”和监听组件将获取更新...

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>

状态更新但反应组件没有

2 个答案: