reactjs - React 不会在状态更改时重新渲染
问题描述
我基本上有如图所示的组件, 其中切换将绘图视图从表格更改为图表。
复选框处理程序如下:
handleTableChange = e => {
const plot = e.target.checked;
this.setState({ plot });
};
显示元素的逻辑是:
{this.state.plot ? plot : table}
问题是,如果我在与图形交互(例如,隔离跟踪)后尝试将视图从图形更改为表格,状态会发生变化,但视图不会。
此 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);
解决方案
您需要更改的是绑定复选框的方式已选中this.state.plot === true
。
<input
type="checkbox"
{...input}
checked={this.state.plot}
placeholder={placeholder}
className={className}
onChange={this.handleTableChange}
/>
推荐阅读
- android - 如何使用 Jetpack Compose UI 在 Android 上正确跟踪屏幕视图?
- linux - 链式 SSH 脚本
- reactjs - 从表单上传多个文件通过axios反应js
- java - 我在显示 Interstitial 后关闭了应用程序,但它仍然调用 onAdDismissedFullScreenContent() 方法
- azure-devops - Devops 查询搜索 - 查找所有以
- algorithm - 合并两个具有最小周长的凸包
- javascript - 如何过滤掉我的对象数组中所有不需要的名称?
- angular - Typescript-Angular 导出的枚举未定义
- arrays - 参考另一个数组列的 Spark 数据帧聚合
- python - OpenGL,使用一个顶点为四边形着色