Reactjs 取一些随机值对组件进行反应

这些是我的组件。 这是quicksort.js=>

import React from "react";
import "../CSS/Quicksort.css";
import Bar from "./Bar";

export default function Quicksort() {
  var arr = new Array(50);
  for (var i = 0; i < 50; ++i) {
    arr[i] = Math.floor(Math.random() * Math.floor(400));
  }

  console.log(arr);
  arr.sort(function (a, b) {
    return  a-b;
  });
  console.log(arr);
  const mp = arr.map((num, idx) => {
    return <Bar key={idx} height={num} />;
  });
  return (
    <>
      <div className="layout">{mp}</div>
    </>
  );
}

从“React”导入React；
导入“./CSS/Quicksort.CSS”；
从“/Bar”导入Bar；
导出默认函数Quicksort（）{
var-arr=新阵列（50）；
对于（变量i=0；i<50；++i）{
arr[i]=Math.floor（Math.random（）*Math.floor（400））；
}
控制台日志（arr）；
arr.sort（函数（a，b）{
返回a-b；
});
控制台日志（arr）；
const mp=arr.map（（num，idx）=>{
返回；
});
返回(
{mp}
);
}

这是Bar.js=>

import { makeStyles } from '@material-ui/core/styles';
import React from 'react'
import '../CSS/Bar.css';

export default function Bar({height}) {
    const useStyles = makeStyles({
        bar:{
            fontSize:10,
            height:height,
            width:20,
            backgroundColor:"red",
            color:"white"
        }
    });
    const classes = useStyles();
    return (
        <>
            <div className={classes.bar} >
                {height}
            </div>
        </>
    )
}

从'@materialui/core/styles'导入{makeStyles}；
从“React”导入React
导入“../CSS/Bar.CSS”；
导出默认功能栏（{height}）{
const useStyles=makeStyles({
酒吧：{
尺寸：10，
高度:高度,，
宽度：20，
背景颜色：“红色”，
颜色：“白色”
}
});
const classes=useStyles（）；
返回(
{height}
)
}

这是输出的图片

查看数组中的第四个元素和渲染元素。 在图像中，我从随机生成的数组中经过的第四个元素是21，但渲染的元素的高度是23。 请帮我做这个。谢谢：）

问题 您正在功能组件的组件体中创建和排序数组，这是React中的副作用和反模式

export default function Quicksort() {
  var arr = new Array(50); // <-- side-effect
  for (var i = 0; i < 50; ++i) {
    arr[i] = Math.floor(Math.random() * Math.floor(400)); // <-- side-effect
  }

  console.log(arr); // <-- side-effect
  arr.sort(function (a, b) { // <-- side-effect
    return a - b;
  });
  console.log(arr); // <-- side-effect

  const mp = arr.map((num, idx) => {
    return <Bar key={idx} height={num} />;
  });
  return (
    <>
      <div className="layout">{mp}</div>
    </>
  );
}

---

请澄清问题所在。从图像中完全不清楚您希望我们看到什么。我不确定是否完全理解了您的问题，但您正在使用一个函数生成随机数，并将这些数传递给您的数组。所以，无论您传递的是什么随机数，您的“条形”组件都正确地显示了它。那么，这里的问题是什么？你能给出更多的描述吗？如果你的问题是红色条比计算出的高度高出两个像素（23比21），对我来说，它似乎增加了相同颜色的1px边框，所有条中是否有2px的额外边框？对，我也注意到了高度差异，并计算出添加了一些边框或类似的边框。请注意，虽然宽度是指定宽度的一半，但仍然有点不清楚。您是否检查了计算样式以查看设置宽度/高度/等的内容？你能试着创建一个运行的代码沙盒，我们可以在其中进行实时调试吗？我克隆、安装并运行了你的代码，对我来说，快速排序栏都是20px宽，高度与数字标签的高度匹配。在你的截图中，我没有看到标签。如果您可以创建一个正在运行的演示来重现该问题，那么我们可以对其进行检查/调试。

export default function Quicksort() {
  const [arr] = React.useState(
    [...Array(50)]
      .map(() => Math.floor(Math.random() * Math.floor(400)))
      .sort((a, b) => a - b)
  );

  React.useEffect(() => {
    console.log(arr);
  }, [arr]);

  const mp = arr.map((num, idx) => {
    return <Bar key={idx} height={num} />;
  });

  return (
    <>
      <div className="layout">{mp}</div>
    </>
  );
}