React не выполняет повторную визуализацию при изменении состояния

Question

У меня в основном есть компонент, как на картинке где переключатель меняет вид графика с таблицы на график.

Флажок обработчик выглядит следующим образом:

 handleTableChange = e => {
    const plot = e.target.checked;
    this.setState({ plot });
  };

Логика для отображения элемента:

{this.state.plot ? plot : table}

Проблема в том, что если я пытаюсь изменить представление с графика на таблицу после того, как я взаимодействую с графиком (скажем, изолировал трассировку), состояние изменяется, но представление не меняется.

Этот рисунок показывает, что сначала (с нетронутым сюжетом) переключение работает, но после взаимодействия сюжета это изменение происходит только при второй попытке переключения.

Почему это происходит и как это исправить?

UPD.: весь код для компонента

https://codepen.io/nikitaneganov/pen/JwBLoe

Минимальный пример:

import React, { Component } from "react";
import Plot from "react-plotly.js";
import classes from "./FirstSeen.module.css";
import { instance } from "../../../axios/index";

class FirstSeen extends Component {
  state = {
    city: "Все города",
    model: "Выберите услугу",
    cities: null,
    models: null,
    mode: "cities",
    plot: true
  };
  handleFormChange = e => {
    const check = e.target.checked;
    const mode = !check ? "cities" : "models";
    this.setState({ mode });
  };
  handleTableChange = e => {
    const plot = e.target.checked;
    this.setState({ plot });
  };
  showResults = values => {
    let { city, service, model, startDate, endDate } = values;
    const cityCheck = city;
    const modelCheck = model;
    this.setState({ city, service, model, startDate, endDate });
  };

  render() {
    if (this.props.loaded && this.state.cities && this.state.models) {
      let title = "Количество новых устройств ";
      let dataForPlot = [];
      /* Here used to be some data collecting */
      const plot = (
        <div className={classes.PlotContainer}>
          <Plot
            // data = {dataForPlot}
            data={newDataForPlot}
          />
        </div>
      );
      const table = (
        <div className={classes.PlotContainer}>
          <Plot
            data={[
              {
                type: "table",
                columnwidth: [4, 1],
                header: {
                  values: headerValues
                },
                cells: {
                  values: cellValues
                }
              }
            ]}
          />
        </div>
      );
      return (
        <div className={classes.Container}>
          <div className={classes.FormContainer}>
            <Form
              className={classes.Form}
              onSubmit={this.showResults}
              initialValues={{
                city: this.state.city,
                service: "Выберите услугу",
                model: this.state.model,
                startDate: this.state.startDate, //startDateInitial,
                endDate: this.state.endDate //endDateInitial
              }}
            >
              {({ handleSubmit, submitting, values }) => (
                <form onSubmit={handleSubmit}>
                  <div className={classes.Controls}>
                    <div className={classes.controlsSecondRow}>
                      <div className={classes.SwitchDiv}>
                        <Field
                          name="plot"
                          className={classes.Input}
                          placeholder="Enter service type"
                        >
                          {({ input, placeholder, meta, className }) => (
                            <div className={classes.SwitchContainer}>
                              Таблица
                              <label
                                className={s.Switch + " " + classes.Switch}
                              >
                                <input
                                  type="checkbox"
                                  {...input}
                                  checked={this.state.plot === true}
                                  placeholder={placeholder}
                                  className={className}
                                  onChange={this.handleTableChange}
                                />
                                <span
                                  className={s.Slider + " " + classes.Switch}
                                />{" "}
                              </label>
                              График
                              {meta.error && meta.touched && (
                                <span>{meta.error}</span>
                              )}
                            </div>
                          )}
                        </Field>
                      </div>
                    </div>
                  </div>
                </form>
              )}
            </Form>
          </div>
          <div className={classes.fPlot}>
            <h3 style={{ margin: "20px 0px -50px 0px", zIndex: 1000 }}>
              {title}
            </h3>
            {!this.state.plot ? table : plot}
          </div>
        </div>
      );
    }
    return (
      <div className={classes.SpinnerWrap}>
        <Spinner />
      </div>
    );
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FirstSeen);

Answer 1

То, что вам нужно изменить, это способ привязки вашего флажка. this.state.plot === true,

<input
   type="checkbox"
   {...input}
   checked={this.state.plot}
   placeholder={placeholder}
   className={className}
   onChange={this.handleTableChange}
/>