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

Question

我正在尝试创建一个应用程序，它将数组从最小到最大进行排序，但一开始我遇到了一个错误。React 不会显示单个错误，并且组件也不会呈现。

应用程序.js

import { SortingVizualize } from './SortingVizualize/SortingVizualize';

function App() {


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


}

export default App;

SortingVizualize.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;

标签： javascriptreactjsjsx

Answer 1

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

您将需要调用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 });
}