组件不会渲染，但react不会显示错误

Question

我正试图创建一个应用程序，将数组从最小到最大排序，但一开始我就遇到了一个错误。React不会显示任何错误，组件也不会渲染。

App.js

import { SortingVizualize } from './SortingVizualize/SortingVizualize';
function App() {

return (
<div className="App">
<SortingVizualize />
</div>
)

}
export default App;

排序Vizualize.jsx

import React from 'react';
// import styles from './SortingVizualize.modules.scss';
export class SortingVizualize extends React.Component {
constructor(props) {
super(props);
this.state = {
array: [],
};
}
componentDidMount() {
this.resetArray();
}
resetArray() {
// I use this method to generate new array and reset
const array = [];
for (let i = 0; i < 100; i++) {
array.push(randomInt(5, 750)); // Min and Max value of number in array
}
}
render() {
const { array } = this.state;
return (
<>
{array.map((value, idx) => (
<div className="array-bar" key={idx}>
{value}
</div>
))}
</>
)
}
}
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
export default SortingVizualize;

Answer 1

您的state.array和resetArray中的array是两个不同的数组，您永远不会更新状态中的一个。

您需要调用setState来更新状态

resetArray() {
// I use this method to generate new array and reset
const array = [];
for (let i = 0; i < 100; i++) {
array.push(randomInt(5, 750)); // Min and Max value of number in array
}
this.setState({ array });
}

Answer 2

您不会触发任何更新事件，因为您将array.push用于局部变量，然后该变量不会分配给组件状态。记住使用this.setState(...)来更新保存在您的状态中的数组，如下所示：

resetArray() {
// I use this method to generate new array and reset
const array = [];
for (let i = 0; i < 100; i++) {
array.push(randomInt(5, 750)); // Min and Max value of number in array
}
this.setState({
array,
});
}

Answer 3

在您的resetArray方法中，您没有将数据分配给您的状态。那么您所在州的数组字段仍然为空。您可以添加this.setState({ array })，以便使用生成的数据触发重新转发器。