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

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

1 个答案: