React 组件采用一些随机值

Question

这些是我的组件。这是 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>
    </>
  );
}

这是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>
        </>
    )
}

这是输出的图片

查看元素检查数组中的第 4 个元素和呈现的元素。在图像中，我从随机生成的数组传递的第 4 个元素是 21，但呈现的元素的高度是 23。请帮我解决一下这个。谢谢:)

Answer 1

问题

您正在功能组件的组件主体中创建和排序数组，这是 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>
    </>
  );
}

功能组件的整个主体IS 渲染函数和你的副作用在“渲染阶段”被调用，并在推送 ReactDOM 时在“提交阶段”与 output/returned UI 混淆到浏览器 DOM.

解决方案

在组件外部创建数组数据，因此在 React 组件生命周期之外，或者将其置于状态中以便绑定到组件生命周期。当组件呈现到 DOM.

时，使用 useEffect 挂钩正确记录数组

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>
    </>
  );
}

React 组件采用一些随机值

React component taking some random values

web-deployment

reactjs

问题

解决方案