2

React for 循环运行两次并出现错误：重新渲染过多。React 限制了渲染的数量以防止无限循环。只有具有偶数索引的数组才被赋值。

 import logo from './logo.svg';
    import './App.css';
    import Board from "./components/Board";
    import { useState, useEffect } from 'react';
    
    
    function App() {
      const [candyArray, setcandyArray] = useState([]);
        let n = 8, arr = [], i;
        for (i = 0; i < (n * n); i++) {
          arr[i] = Math.floor((Math.random() * n));
          i++;
        }
        setcandyArray(arr);
      console.log(candyArray);
      return (
        <Board />
      );
    }
    
    export default App;

板js

export default function Board(props) {

    return (

        <div className="board">
            <div className="board-wrapper">
                <div className="candy-box" id="box1"></div>
                <div className="candy-box" id="box2"></div>
                <div className="candy-box" id="box3"></div>
                <div className="candy-box" id="box4"></div>
                <div className="candy-box" id="box5"></div>
                <div className="candy-box" id="box6"></div>
                <div className="candy-box" id="box7"></div>
                <div className="candy-box" id="box8"></div>
                <div className="candy-box" id="box9"></div>
                <div className="candy-box" id="box10"></div>
                <div className="candy-box" id="box11"></div>
                <div className="candy-box" id="box12"></div>
                <div className="candy-box" id="box13"></div>
                <div className="candy-box" id="box14"></div>
                <div className="candy-box" id="box15"></div>
                <div className="candy-box" id="box16"></div>
                <div className="candy-box" id="box17"></div>
                <div className="candy-box" id="box18"></div>
                <div className="candy-box" id="box19"></div>
                <div className="candy-box" id="box20"></div>
                <div className="candy-box" id="box21"></div>
                <div className="candy-box" id="box22"></div>
                <div className="candy-box" id="box23"></div>
                <div className="candy-box" id="box24"></div>
                <div className="candy-box" id="box25"></div>
                <div className="candy-box" id="box26"></div>
                <div className="candy-box" id="box27"></div>
                <div className="candy-box" id="box28"></div>
                <div className="candy-box" id="box29"></div>
                <div className="candy-box" id="box30"></div>
                <div className="candy-box" id="box31"></div>
                <div className="candy-box" id="box32"></div>
                <div className="candy-box" id="box33"></div>
                <div className="candy-box" id="box34"></div>
                <div className="candy-box" id="box35"></div>
                <div className="candy-box" id="box36"></div>
                <div className="candy-box" id="box37"></div>
                <div className="candy-box" id="box38"></div>
                <div className="candy-box" id="box39"></div>
                <div className="candy-box" id="box40"></div>
                <div className="candy-box" id="box41"></div>
                <div className="candy-box" id="box42"></div>
                <div className="candy-box" id="box43"></div>
                <div className="candy-box" id="box44"></div>
                <div className="candy-box" id="box45"></div>
                <div className="candy-box" id="box46"></div>
                <div className="candy-box" id="box47"></div>
                <div className="candy-box" id="box48"></div>
                <div className="candy-box" id="box49"></div>
                <div className="candy-box" id="box50"></div>
                <div className="candy-box" id="box51"></div>
                <div className="candy-box" id="box52"></div>
                <div className="candy-box" id="box53"></div>
                <div className="candy-box" id="box54"></div>
                <div className="candy-box" id="box55"></div>
                <div className="candy-box" id="box56"></div>
                <div className="candy-box" id="box57"></div>
                <div className="candy-box" id="box58"></div>
                <div className="candy-box" id="box59"></div>
                <div className="candy-box" id="box60"></div>
                <div className="candy-box" id="box61"></div>
                <div className="candy-box" id="box62"></div>
                <div className="candy-box" id="box63"></div>
                <div className="candy-box" id="box64"></div>
            </div>
        </div>
    )
}

我想创建一个值在 0 到 7 之间随机填充的数组，并将该数组存储在状态值（candyArray）中以做出反应。谢谢你

4

1 回答 1

1

您在组件主体中有一个无意的副作用。您可能会将您的应用程序渲染到一个React.Strictmode运行特定功能和方法两次的组件中，以帮助您检测意外的副作用。这些有目的的双重调用之一是函数组件的函数体。由于副作用是状态更新，因此会触发重新渲染。这是 React 抱怨的渲染循环。

组件安装时使用 auseEffect运行一次效果。当状态更新时，使用第二个useEffect挂钩记录。candyArray

您似乎也将循环计数器加倍i，导致仅更新所有其他数组元素。i++从循环体中删除附加项。

const Board = () => <div>Board</div>;

function App() {
  const [candyArray, setcandyArray] = React.useState([]);
  
  React.useEffect(() => {
    let n = 8, arr = [], i;
    for (i = 0; i < (n * n); i++) {
      arr[i] = Math.floor((Math.random() * n));
    }
    setcandyArray(arr);
  }, []);

  React.useEffect(() => {
    console.log(candyArray.map((el, i) => `[${i}->${el}]`));
  }, [candyArray]);

  return (
    <Board />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <App />,
  rootElement
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root" />

于 2021-11-07T10:39:54.903 回答