为什么反应不重新渲染状态变化？答案

【问题标题】：why is react not re rendering on state change?为什么反应不重新渲染状态变化？
【发布时间】：2017-03-25 20:54:07
【问题描述】：

无法弄清楚出了什么问题。我单击一个按钮，这将设置状态和状态设置，将键更改为真，如果该键为真，则应呈现不同的输出。这是代码：

点击按钮调用函数：

<input type="submit" value="I can play" onClick={() => this.canPlay()}/>

运行这个函数：

 canPlay: function() {
    let name = this.props.value;
    console.log(name, 'name');
    let email = 'mark@mail';
    this.submitUserResponseCanPlay(this.today(), name, email)
    this.setState({thanks: true}) //SET STATE HERE
  },

（感谢在 getInitialState 中设置为 false）

然后在渲染函数中：

render: function(){
    let output;
    if (this.state.thanks){
      output = <Thanks />;
    }

如果状态为真，则渲染新的输出。 ` 部分是一个类，它在渲染函数中只有一个返回部分，如下所示：

var Thanks = React.createClass({

  render: function(){
    return (
      <div id="results" className="search-results">
        Thanks, your answer has been recorded!
      </div>
    )
  }

});

但这并没有显示出来。知道为什么吗？？

奇怪的是，在我的文件的另一部分中是这样的，而那部分有效。即我之前单击了一个提交按钮，这会将键/值对从 false 更改为 true 并呈现新的页面布局。只是不在这里工作。也许我错过了一些小东西..

【问题讨论】：

我记得你忘记了 render() 方法中的 return()
您可以发布整个组件而不是将其拆分为多个部分吗？可能你没有绑定 canPlay
组件很大。但你还想看什么？有两个组件
@Borjante 我只是把它省略了，所以不要包含很多代码
这只是一个提示，但对我来说，通常是流氓shouldComponentUpdate 缺少状态比较导致这种行为。

标签： javascript html reactjs state setstate

【解决方案1】：

render: function(){
let output;
if (this.state.thanks){
  output = <Thanks />;
}

这应该是

render: function(){
if (this.state.thanks){
  return <Thanks />
}

你总是需要在render中返回一些东西

【讨论】：

我在渲染中确实有一些东西，我只是错过了它以不显示大量代码。
我的意思是你需要return关键字
你没有渲染函数的全部上下文。可能是输出稍后用作组件或其他东西。我们需要查看更多信息

【解决方案2】：

我认为您不能将变量设置为 jsx，所以如果我错了，请忽略这一点。但在这种情况下，您似乎可能正在尝试渲染一个

 {output}

在您的代码中的某处。而是将其替换为

{this.state.thank ? <Thanks /> : null}

【讨论】：