React不会在状态更改时重新呈现

Question

我基本上具有图片中的成分 在其中切换可将绘图视图从表格更改为图表。

复选框处理程序如下：

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

显示元素的逻辑是：

{this.state.plot ? plot : table}

问题是，如果我尝试在与图形进行交互后（例如，隔离走线）将视图从表更改为表，则状态会发生变化，但视图却没有。

This gif显示，首先（在未触及地块的情况下）切换有效，但在地势交互之后，更改仅在第二次尝试切换时发生。

为什么会这样以及如何解决？

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}
/>