React giving me Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

Question

handleSortByChange 函数在浏览器上给我一个错误，指出“重新渲染太多。 React 限制渲染的数量以防止无限循环。”但是在终端显示编译成功

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

const sortByOptions = {
    'Best Match': 'best_match',
    'Highest Rated': 'rating',
    'Most Reviewed': 'review_count'
}

function SearchBar() {
    const [ sortBy, setSortBy ] = useState('best_match')

    const getSortByClass = (sortByOption) => {
        if(sortBy === sortByOption) {
            return 'active';
        } else {
            return '';
        }
    }

    const handleSortByChange = (sortByOption) => {
        setSortBy(sortByOption);
    }

    const renderSortByOptions = () => {
        return Object.keys(sortByOptions).map((sortByOption) => {
            let sortByOptionValue = sortByOptions[sortByOption];
            return <li onClick={handleSortByChange(sortByOptionValue)} className={getSortByClass(sortByOptionValue)} key={sortByOptionValue}>{sortByOption}</li>
        })
    }

    return(
        <div className="SearchBar">
            <div className="SearchBar-sort-options">
                <ul>
                    {renderSortByOptions()}
                </ul>
            </div>
            <div className="SearchBar-fields">
                <input placeholder="Search Businesses" />
                <input placeholder="Where?" />
            </div>
            <div className="SearchBar-submit">
                {/* <a href="#">Let's Go</a> */}
                {/* <button>Let's Go</button> */}
            </div>
        </div>
    )
}

export default SearchBar;

Answer 1

在您的 <li> 标签上，您直接调用方法，例如，

onClick={handleSortByChange(sortByOptionValue)}，这将设置状态并触发重新渲染，同样的事情也会在这个渲染周期中再次发生，从而无限循环。

改为执行以下操作：

<li
          onClick={()=>handleSortByChange(sortByOptionValue)}
          className={getSortByClass(sortByOptionValue)}
          key={sortByOptionValue}
        >

这样，handleSortByChange(sortByOptionValue) 只会在 <li> 元素被点击时执行。

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

const sortByOptions = {
  "Best Match": "best_match",
  "Highest Rated": "rating",
  "Most Reviewed": "review_count"
};

function SearchBar() {
  const [sortBy, setSortBy] = useState("best_match");

  const getSortByClass = sortByOption => {
    if (sortBy === sortByOption) {
      return "active";
    } else {
      return "";
    }
  };

  const handleSortByChange = sortByOption => {
    setSortBy(sortByOption);
  };

  const renderSortByOptions = () => {
    return Object.keys(sortByOptions).map(sortByOption => {
      let sortByOptionValue = sortByOptions[sortByOption];
      return (
        <li
          onClick={()=>handleSortByChange(sortByOptionValue)}
          className={getSortByClass(sortByOptionValue)}
          key={sortByOptionValue}
        >
          {sortByOption}
        </li>
      );
    });
  };

  return (
    <div className="SearchBar">
      <div className="SearchBar-sort-options">
        <ul>{renderSortByOptions()}</ul>
      </div>
      <div className="SearchBar-fields">
        <input placeholder="Search Businesses" />
        <input placeholder="Where?" />
      </div>
      <div className="SearchBar-submit">
       
      </div>
    </div>
  );
}

export default SearchBar;

工作示例：Stackblitz

Answer 2

改为在 onClick 函数上试试这个：

{() => onClick={handleSortByChange(sortByOptionValue)}

React giving me Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

React giving me Error: Too many re-renders. React limits the number of renders to prevent an infinite loop

components

render

function

infinite-loop

reactjs