Question

嗨，我被困在React函数useState中。我只想学习钩子和useState，但是即使为解决问题而费劲也无法取得任何进展。这是我完整的react函数：

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>

Answer 2

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

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

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

Answer 3

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

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

之所以会发生这种情况，是因为onClick函数（如果不带匿名函数使用）会立即被调用，并且setOrderData再次重新呈现它会导致无限循环。因此最好使用匿名函数。

希望有帮助。毫无疑问。

Answer 4

只需使用Arrow（from random import shuffle, randrange def generator(): g = open('passwords.txt', "r") passwords = g.read().split("\n") shuffle(passwords) g.close() l =len(passwords)-1 txt = print('YOUR HONEYPOT IS :', '\n') s =set() while len(s)<19: i = randrange(l) s.add(passwords[i]) for p in passwords: print(p) if __name__ == "__main__": generator()）函数：

=>

Answer 5

使用

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

这对我有用...

“错误：重新渲染过多。React限制了渲染数量，以防止无限循环。”

5 个答案: