React随机数归并排序可视化组件无内容渲染问题求助

问题 #

学习React实现基于随机数的归并排序可视化功能时，发现div标签无任何内容渲染，已添加console调试仍未找到原因，请求排查修复。

问题代码 #

import React from "react";

const number_of_array_bars = 310;

const sortingVisualizer = () => {
  const [array, setArray] = useState([]);

  useEffect(() => {}, []);
  const resetArray = () => {
    const newArray = [];
    for (let i = 0; i < number_of_array_bars; i++) {
      newArray.push(randomIntFromInterval(5, 730));
    }
    console.log("newArray", newArray);
    setArray(newArray);
  };
  const render = () => {
    return (
      <>
        {console.log("array", array)}
        {array.map((value, index) => {
          <div key={index} style={{ height: "${value}px" }}>
            test
          </div>;
        })}
      </>
    );
  };
  return render();
};

export default sortingVisualizer;

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

排查与修复 #

代码存在5个关键问题导致渲染失败：

• 未导入React Hooks：useState和useEffect需从React中导入，或改用React.useState、React.useEffect写法
• 数组未初始化：useEffect空依赖数组内未调用resetArray，初始array为空数组，无元素可渲染
• map函数未返回元素：箭头函数用{}包裹时未显式返回JSX，默认返回undefined
• 样式语法错误：height值用双引号包裹模板字符串语法，需改用反引号实现动态值
• 组件名不符合规范：React组件名必须大写开头，否则会被识别为原生HTML标签

修复后的完整代码：

import React, { useState, useEffect } from "react";

const number_of_array_bars = 310;

const SortingVisualizer = () => {
  const [array, setArray] = useState([]);

  useEffect(() => {
    resetArray();
  }, []);
  
  const resetArray = () => {
    const newArray = [];
    for (let i = 0; i < number_of_array_bars; i++) {
      newArray.push(randomIntFromInterval(5, 730));
    }
    setArray(newArray);
  };

  return (
    <>
      {array.map((value, index) => (
        <div 
          key={index} 
          style={{ 
            height: `${value}px`,
            width: '3px',
            backgroundColor: '#2ecc71',
            margin: '0 1px'
          }}
        />
      ))}
    </>
  );
};

export default SortingVisualizer;

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

额外说明：修复后添加了宽度、背景色、边距等基础样式，让柱状条更直观，可根据需求调整样式细节；同时移除了单独的render函数，直接在组件返回中编写JSX，符合React组件常规写法。

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