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

Question

The alert modal dialog don't change even state changes

I shared codepen here . This is component.

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>
    );
  }
}

To test first click show toggle, and there you see button with title recording , I want this to toggle when I click but it never do.

I shared codepen here .

If you see console, you see it changes state.

I am not sure what is wrong,

Thanks

Answer 1

You do not need dialog in state, it will not change in the dialog, this will not change as your are not setting state. that onclick on dialog is again setting the same state without changing the record type.

problem:

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

Solution:

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

Answer 2

Yes it won't change because the whole element inside dailog state is not component just javascript elements,

Solution is separate Dialog as a another component and pass props, this way your code will be more clean and readable.

 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>