React组件渲染时更新其他组件报错，如何用useEffect解决？

你遇到的警告核心原因是：在渲染RenderSortByOptions的过程中直接调用了状态更新函数。具体来看，<li>元素的onClick={handleSortByChange(sortByOptionValue)}写法会在组件渲染时立即执行handleSortByChange，进而触发setSortBy更新父组件SearchBar的状态，违反了React的渲染规则——不能在渲染阶段更新其他组件的状态。

无需使用useEffect，只需要修正onClick的绑定逻辑，让状态更新函数仅在用户点击时执行即可。以下是两种可行的修复方式：

方式一：用箭头函数包裹状态更新调用 #

将<li>的onClick属性改为箭头函数形式，确保函数在点击事件触发时才执行：

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

方式二：让handleSortByChange返回一个函数 #

修改handleSortByChange的结构，使其返回一个待执行的函数，这样onClick就能直接接收函数引用：

function handleSortByChange(sortByOption) {
  return () => {
    setSortBy(sortByOption);
  };
}

// 对应<li>的onClick写法
onClick={handleSortByChange(sortByOptionValue)}

另外建议将RenderSortByOptions改为普通渲染函数（小写开头，符合React命名规范），避免被误识别为独立组件，代码如下：

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

export default function SearchBar(props) {
  const [term, setTerm] = useState("");
  const [location, setLocation] = useState("");
  const [sortBy, setSortBy] = useState("best_match");

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

  function handleTermChange(event) {
    setTerm(event.target.value);
  }

  function handleLocationChange(event) {
    setLocation(event.target.value);
  }

  function handleSearch(event) {
    props.searchYelp(term, location, sortBy);
    event.preventDefault();
  }

  function getSortByClass(sortByOption) {
    return sortBy === sortByOption ? "active" : "";
  }

  function handleSortByChange(sortByOption) {
    setSortBy(sortByOption);
  }

  // 改为普通渲染函数，而非组件
  function renderSortByOptions() {
    return Object.keys(sortByOptions).map((sortByOption) => {
      const sortByOptionValue = sortByOptions[sortByOption];
      return (
        <li
          key={sortByOptionValue}
          className={getSortByClass(sortByOptionValue)}
          onClick={() => handleSortByChange(sortByOptionValue)}
        >
          {sortByOption}
        </li>
      );
    });
  }

  return (
    <div className="SearchBar">
      <div className="SearchBar-sort-options">
        <ul>
          {renderSortByOptions()}
        </ul>
      </div>
      <div className="SearchBar-fields">
        <input onChange={handleTermChange} placeholder="Search Businesses" />
        <input onChange={handleLocationChange} placeholder="Where?" />
      </div>
      <div className="SearchBar-submit">
        <a href="/#" onClick={handleSearch}>
          Search
        </a>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Ashish Rana