复选框和新组件工作不稳定

Question

你好，我正在尝试用checkbox的数据构建一个新组件，为了做到这一点，我有以下代码：

import React from "react";
import BottomScrollListener from "react-bottom-scroll-listener";
import ThingsQuery from "./../querys/ThingsQuery";
import "./styles/Things.scss";
export default class Things extends React.Component {
constructor() {
super();
this.displayData = [this.createPag()];
}
state = {
sort: "popular",
page: 1,
featured: false,
allPages: false,
};
createPag = (onNull = () => {}) => {
return (
<ThingsQuery
page={this.state.page}
sort={this.state.sort}
featured={this.state.featured}
onNull={onNull}
/>
);
};
handleSortClick = (e) => {
const sort = e.target.innerText.trim().toLowerCase();
this.setState({ sort, page: 1, allPages: false }, () => {
this.displayData = [this.createPag()];
});
};
changePage = () => {
if (!this.state.allPages) {
const currentPage = this.state.page + 1;
this.setState({ page: currentPage });
const page = this.createPag(() => {
this.setState({ allPages: true });
});
if (!this.state.allPages) {
this.displayData.push(page);
}
}
};
handleChangeFeatured = (e) => {
const featured = e.target.checked;
console.log("onChangeFeatured");
console.log(featured);
this.setState({ page: 1, allPages: false, featured: featured }, () => {
console.log("State changed");
this.displayData = [this.createPag()];
});
};
render() {
return (
<div className="things col-xs-1 text-center">
<BottomScrollListener onBottom={this.changePage} />
<div>
<div className="custom-control custom-switch">
<input
onChange={this.handleChangeFeatured}
type="checkbox"
className="custom-control-input"
id="customSwitch1"
checked={this.state.featured}
/>
<label className="custom-control-label" for="customSwitch1">
Featured
</label>
</div>
<div className="btn-group" role="group" aria-label="Basic example">
<button
onClick={this.handleSortClick}
type="button"
className="btn btn-secondary"
>
Popular
</button>
<button
onClick={this.handleSortClick}
type="button"
className="btn btn-secondary"
>
Newest
</button>
<button
onClick={this.handleSortClick}
type="button"
className="btn btn-secondary"
>
Latest
</button>
</div>
<div className="container">
<div className="card-columns">{this.displayData}</div>
</div>
</div>
</div>
);
}
}

正如你所看到的，我有一个checkBox，它的检查值是通过state.feature.获得的

这是正确加载的。如果我放入代码featured=True，就会加载它，如果我放入false，也会起作用。

问题是当尝试更改浏览器上的值时。

当我点击开关时，这个改变和值也会改变，createPag会完全执行，但<ThingsQuery .... />在第一次点击时不起作用，我需要更改检查的值两次，当然，在这之后，我会得到我想要的相反的数据。

我该如何解决这个问题，为什么<ThingsQuery.../>在第一次点击时不运行？

感谢

Answer 1

作为本地实例变量存储的值，即this.displayData在更改时不会导致重新渲染。它们必须处于状态，并通过setState进行更改才能触发重新渲染。

因此，在您的情况下，调用setState来更改sort和allPages，然后在状态更改和随后的重新渲染之后，在setState回调中更改this.displayData。由于重新渲染已经完成，并且更改本地实例变量不会导致重新渲染，因此在它下次运行并且setState使用新的displayData调用重新渲染之前，不会发生任何更改。

如果希望this.displayData中的更改导致重新渲染，则它应该处于状态任何影响渲染内容的值都应处于状态。