React组件拆分引发浏览器无限加载问题求助

核心问题 #

你写的Dropdown组件内部递归调用了自身：在组件的return语句里，你渲染了<Dropdown />标签，这会让React不断创建新的Dropdown实例，陷入无限循环，最终导致浏览器无限加载。

修复方案 #

把当前的Dropdown拆分成两个部分：

• 一个负责渲染单个下拉选择器的通用组件
• 原来的Dropdown作为容器组件，负责管理状态并渲染两个通用下拉组件

修复后的代码 #

通用下拉组件（SingleDropdown.js）

import * as React from "react";

function SingleDropdown({ label, options, value, onChange }) {
  return (
    <div>
      <label>{label}</label>
      <select value={value} onChange={onChange}>
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
    </div>
  );
}

export default SingleDropdown;

容器组件（Dropdown.js）

import * as React from "react";
import SingleDropdown from "./SingleDropdown";

function Dropdown() {
  const [food, setFood] = React.useState("fruit");
  const [drink, setDrink] = React.useState("water");

  const handleFoodChange = (event) => {
    setFood(event.target.value);
  };

  const handleDrinkChange = (event) => {
    setDrink(event.target.value);
  };

  return (
    <div>
      <SingleDropdown
        label="What do we eat?"
        options={[
          { label: "Fruit", value: "fruit" },
          { label: "Vegetable", value: "vegetable" },
          { label: "Meat", value: "meat" },
        ]}
        value={food}
        onChange={handleFoodChange}
      />

      <SingleDropdown
        label="What do we drink?"
        options={[
          { label: "Water", value: "water" },
          { label: "Beer", value: "beer" },
          { label: "Wine", value: "wine" },
        ]}
        value={drink}
        onChange={handleDrinkChange}
      />

      <p>We eat {food}!</p>
      <p>We drink {drink}!</p>
    </div>
  );
}

export default Dropdown;

App.js保持不变

import "./App.css";
import Checkbox from "./components/Checkbox";
import Dropdown from "./components/Dropdown";

function App() {
  return (
    <div>
      <Checkbox />
      <Dropdown />
      <h1>test</h1>
    </div>
  );
}

export default App;

额外说明 #

• 通用组件SingleDropdown只负责接收props渲染下拉选择器，不管理状态，具备复用性
• 容器组件Dropdown负责管理食物和饮品的状态，并将状态与回调传递给两个通用下拉组件

内容的提问来源于stack exchange，提问作者Luke Czoboriek