“错误：重新渲染太多。React 限制渲染次数以防止无限循环。”

Question

嗨，我一直被困在 React Function 中useState。我只是想学习 hooks 和 useState，但我什至费力寻找解决方案也没有任何进展。这是我的完整反应功能：

import React, { useState } from 'react';
import './MainPart.css';

function MainPart(props) {
  const [orderData_, setOrderData_] = useState(props.orderData);

  let topicData_ = props.topicData;
  let titleData_ = props.titleData;
  let infoData_ = props.infoData;

  return (
    <div className='MainPart'>
      <div className='mainWindow'>{getPics(orderData_)}</div>
      <div className='information'>
        <div className='moreNewsDivs'>
          <div className='moreNewsDiv1'>
            <h4>MORE NEWS</h4>
          </div>
          <div className='moreNewsDiv2'>
            <button
              className='previous-round'
              onClick={setOrderData_(previous(orderData_))}
            >
              &#8249;
            </button>
            &nbsp;&nbsp; &nbsp;&nbsp;
            <button href='/#' className='next-round'>
              &#8250;
            </button>
          </div>
        </div>
        <hr />
        <div className='topicDiv'>
          <h5 className='topicData'>{topicData_}</h5>
          <h5 className='titleData'>{titleData_}</h5>
          <h6 className='infoData'>{infoData_}</h6>
        </div>
      </div>
    </div>
  );
}

function previous(orderData_) {
  let newOrderData;

  if (orderData_ === 3) {
    newOrderData = 2;
    console.log(newOrderData);
    return newOrderData;
  } else if (orderData_ === 1) {
    newOrderData = 3;
    console.log(newOrderData);
    return newOrderData;
  } else {
    newOrderData = 1;
    console.log(newOrderData);
    return newOrderData;
  }
}

function next(orderData_) {
  let newOrderData;

  if (orderData_ === 3) {
    newOrderData = 1;
  } else if (orderData_ === 2) {
    newOrderData = 3;
  } else {
    newOrderData = 2;
  }
  return newOrderData;
}

const getPics = picOrder => {
  if (picOrder === 1) {
    return (
      <img
        src={require('../assets/desktopLarge/mainImage.png')}
        className='MainImage'
        alt=''
        id='mainImage'
      />
    );
  } else if (picOrder === 2) {
    return (
      <img
        src={require('../assets/desktopLarge/bridge.png')}
        className='MainImage'
        alt=''
        id='mainImage'
      />
    );
  } else {
    return (
      <img
        src={require('../assets/desktopLarge/forest.png')}
        className='MainImage'
        alt=''
        id='mainImage'
      />
    );
  }
};

export default MainPart;

我在使用时遇到错误useState。即使加载新页面并且没有按下任何按钮，我的按钮 onClick 事件侦听器已激活，并且正如我之前在“我的错误”主题中提到的：

“错误：重新渲染太多。React 限制渲染次数以防止无限循环。”

Answer 1

问题可以在您的onClick道具中找到：

<button className="previous-round" onClick={setOrderData_(previous(orderData_))}>&#8249;</button>
                                            ^

花括号之间的所有内容都会立即计算。这会导致setOrderData_在每个渲染循环中调用该函数。

通过用箭头函数包装函数，计算出的代码将产生一个函数，只要用户点击按钮就可以调用该函数。

<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}
>&#8249;</button>

您可以在官方文档https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx 中找到有关 JSX 和表达式的更多信息

无限重渲染循环

无限循环的原因是因为setState事件回调中的某些东西（很可能）正在触发重新渲染。这将再次调用事件回调并导致 React 停止并抛出“Too many re-renders”。错误。

技术说明

为了更好地理解 JSX 以这种方式工作的原因，请参阅下面的代码。JSX 实际上被编译成 Javascript，每个 prop 都会被传递给对象中的一个函数。有了这些知识，您将看到handleEvent()在最后一个示例中立即调用了它。

// Simple example
// JSX: <button>click me</button>
// JS:  createElement('button', { children: 'click me' })
createElement("button", { children: "click me" });

// Correct event callback
// JSX: <button onClick={handleClick}>click me</button>
// JS:  createElement('button', { onClick: handleClick, children: 'click me' })
createElement("button", { onClick: handleClick, children: "click me" });

// Wrong event callback
// JSX: <button onClick={handleClick()}>click me</button>
// JS:  createElement('button', { onClick: handleClick(), children: 'click me' })
createElement("button", { onClick: handleClick(), children: "click me" });

Answer 2

只需用下面的按钮替换您的按钮

<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}>&#8249;</button>

发生这种情况是因为如果在没有匿名函数的情况下使用 onClick 函数会被立即调用并且 setOrderData 再次重新渲染它导致无限循环。所以最好使用匿名函数。

希望能帮助到你。有任何疑问。

Answer 3

当我浏览你的代码时，我发现了一些东西。

Onclick 函数需要是箭头函数。Onclick 是一个事件，您只是直接调用 onclick 内部的函数。这会导致过多的重新渲染，因为您直接在返回值中设置状态。那行不通。

在这里调用 setState 会使您的组件成为产生无限循环的竞争者。render 应该保持纯净，并用于根据状态或道具在 JSX 片段/子组件之间有条件地切换。渲染中的回调可用于更新状态，然后根据更改重新渲染此行以上摘自此处的链接：https : //itnext.io/react-setstate-usage-and-gotchas-ac10b4e03d60