React.js 组件甚至不呈现状态更改答案

【问题标题】：React.js component not rendering even state changesReact.js 组件甚至不呈现状态更改
【发布时间】：2019-01-15 03:47:12
【问题描述】：

警报模式对话框即使状态改变也不会改变

我分享了 codepen here。这是组件。

class RecordingReports extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dialog: null,
      newContent: {
        contentType: "recording"
      }
    };
  }
  toggleContentType = () => {
    let newContent = this.state.newContent;
    this.setState({
      newContent: {
        ...newContent,
        contentType:
          newContent.contentType == "recording" ? "report" : "recording"
      }
    });
  };
  showDialog = () => {
    this.setState({
      dialog: (
        <div>
          <button
            onClick={() => {
              this.toggleContentType();
            }}
          >
            {this.state.newContent.contentType} // it remains recording
          </button>
        </div>
      )
    });
  };
  render() {
    console.log(this.state.newContent); //this shows state changes
    return (
      <div>
        {this.state.dialog} 
        <button onClick={() => this.showDialog()} >show Toggle Button</button>
      </div>
    );
  }
}

要测试第一次单击显示切换，您会看到标题为 recording 的按钮，我希望它在单击时切换，但它永远不会。

我分享了 codepen here。

如果你看到控制台，你会看到它改变了状态。

我不确定是什么问题，

谢谢

【问题讨论】：

OP 你能检查你的codepen链接吗？它不包含您显示的示例代码。
codepen 显示一些其他代码
对不起，我更新了，请重新审核。

标签： javascript reactjs state

【解决方案1】：

你不需要状态对话框，它不会在对话框中改变，这不会改变，因为你没有设置状态。 onclick 对话框再次设置相同的状态而不更改记录类型。

问题：

this.setState({
      dialog: (
        <div>
          <button
            onClick={() => {
              this.toggleContentType();
            }}
          >
            {this.state.newContent.contentType} // it remains recording
          </button>
        </div>
      )
    });

解决方案：

constructor(props) {
    super(props);

    this.state = {
      dialog: null,
      newContent: {
        contentType: "recording"
      },
      showDialog: false
    };
  }
  toggleContentType = () => {
    let newContent = this.state.newContent;
    this.setState({
      newContent: {
        ...newContent,
        contentType:
          newContent.contentType === "recording" ? "report" : "recording"
      }
    });
  };
  dialog = () => {
    return this.state.showDialog && <div>
      <button
        onClick={() => {
          this.toggleContentType();
        }}
      >
        {this.state.newContent.contentType} // it remains recording
      </button>
    </div>

  };

  showHideDialog = () => {
    this.setState({ showDialog: !this.state.showDialog });
  }
  render() {

    return (
      <div>
        {this.dialog()}
        <button onClick={() => this.showHideDialog()} >show Toggle Button</button>
      </div>
    );
  }

demo

【讨论】：

【解决方案2】：

是的，它不会改变，因为 dailog 状态中的整个元素不是组件，只是 javascript 元素，

解决方案是单独的Dialog作为另一个组件并传递props，这样你的代码会更干净和可读。

const Dialog = ({ show, onClick, newContent }) => {
  return !show ? null : (
    <div>
      <button onClick={onClick}>{newContent.contentType}</button>
    </div>
  );
};

class RecordingReports extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showDialog: false,
      newContent: {
        contentType: "recording"
      }
    };
  }

  toggleContentType = () => {
    let newContent = this.state.newContent;
    this.setState({
      newContent: {
        ...newContent,
        contentType: newContent.contentType == "recording" ? "report" : "recording"
      }
    });
  };

  toggleDialog = () => {
    this.setState({
      showDialog: !this.state.showDialog
    });
  };

  render() {
    console.log(this.state.newContent); //this shows state changes
    return (
      <div>
        <Dialog show={this.state.showDialog} onClick={this.toggleContentType} newContent={this.state.newContent}/>
        <button onClick={this.toggleDialog}>show Toggle Button</button>
      </div>
    );
  }
}

ReactDOM.render(<RecordingReports />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"><div>

【讨论】：