React组件无法正确渲染array-bar div元素问题求助

你的代码里有三个关键问题导致柱状条无法生成，还有一个CSS细节影响显示效果，逐一修复如下：

1. setState 调用格式错误 #

resetArray 方法中，你直接把数组传给了setState，但React的setState需要接收对象格式的参数，正确写法是把数组包裹在对象里：

// 错误写法
this.setState(array);
// 正确写法
this.setState({ array });

2. map 回调未返回元素 #

render里的array.map使用大括号{}作为回调体，但没有显式返回<div>元素。要么添加return，要么改用小括号()实现隐式返回：

// 错误写法（无返回）
{array.map((value, idx) => {
  <div className="array-bar" key={idx} style={{ height: `${value}px` }}></div>;
})}
// 正确写法一（显式return）
{array.map((value, idx) => {
  return <div className="array-bar" key={idx} style={{ height: `${value}px` }}></div>;
})}
// 正确写法二（隐式返回）
{array.map((value, idx) => (
  <div className="array-bar" key={idx} style={{ height: `${value}px` }}></div>
))}

3. 按钮点击事件未触发函数 #

按钮的onClick回调里只引用了this.resetArray，没有调用函数，需要加上括号执行：

// 错误写法
<button onClick={() => this.resetArray}>Generate</button>
// 正确写法（简洁版）
<button onClick={this.resetArray}>Generate</button>

注：使用简洁版需要在构造函数中绑定this：this.resetArray = this.resetArray.bind(this);

4. CSS 布局优化（必要） #

默认<div>是块级元素会垂直排列，修改CSS让柱状条横向显示：

.array-container{
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 600px;
}

.array-bar{
    background-color: blue;
    width: 5px;
    flex: 1;
}

修复后的完整代码 #

import React, { Component } from "react";
import "./SortingViz.css";
export default class SortingViz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: [],
    };
    this.resetArray = this.resetArray.bind(this);
  }

  componentDidMount() {
    this.resetArray();
  }

  resetArray() {
    let array = [];
    for (let i = 0; i < 150; i++) {
      array.push(randomInt(100,600));
    }
    this.setState({ array });
    console.log(array);
  }
  
  render() {
    const { array } = this.state;
    return (
      <div className="array-container">
        {array.map((value, idx) => (
          <div className="array-bar"
            key={idx}
            style={{ height: `${value}px` }}></div>
        ))}
        <button onClick={this.resetArray}>Generate</button>
      </div>
    );
  }
}

function randomInt(min,  max)
{
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

内容的提问来源于stack exchange，提问作者Ananya Sharma