React新手求助：组件状态频繁重新初始化问题排查

嘿，别担心，刚入门React碰到这种状态不更新的问题太正常了！我帮你拆解下代码里的核心问题，再给你修正后的版本：

核心问题分析 #

• 手动实例化类组件是错误操作：你直接用new WidgetStatus()创建实例，完全违背了React的组件工作逻辑。React需要自己管理组件的实例和生命周期，手动创建的实例调用setState根本不会触发页面重新渲染，状态变了页面也毫无反应。
• 组件渲染方式不对：你在App里直接调用App2()，而不是用<App2 />的方式渲染组件，这会导致每次App渲染时都重新执行App2函数，里面的变量自然会被反复重置。
• setPOLState方法有bug：方法里你写了this.previousState[Num]，但正确的前状态引用是参数传入的previousState，应该用它来更新状态。
• DropdownItem的点击事件没绑定：你给DropdownItem传了onClick但组件内部没处理这个props，导致点击菜单选项根本不会触发Dropitemclick函数。
• 普通变量无法持久化状态：machin是普通let变量，每次组件渲染都会被重置，应该用useState来保存这个状态。

修正后的代码 #

App.js

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

// 把WidgetStatus改成函数组件，更符合React当前最佳实践
function WidgetStatus({ num }) {
  const [count, setCount] = useState(0);

  const setPOLState = (choice) => {
    setCount(prev => prev + choice);
  };

  const renderContent = () => {
    switch(count) {
      case 0: return <div> test </div>;
      case 1: return <div> You chose one </div>;
      case 2: return <div> You chose two </div>;
      case 3: return <div> You chose three </div>;
      case 4: return <div> You chose four </div>;
      case 5: return <div> You chose five </div>;
      case 6: return <div> You chose six </div>;
      default: return <div> test </div>;
    }
  };

  // 通过children回调把状态修改方法传递给父级组件
  return (
    <div>
      {typeof children === 'function' ? children(setPOLState) : null}
      {renderContent()}
    </div>
  );
}

function App() {
  const [machin, setMachin] = useState(1);

  function Navbar(props) {
    return (
      <nav className="navbar">
        <ul className="navbar-nav">{props.children}</ul>
      </nav>
    );
  }

  function NavItem(props) {
    const [open, setOpen] = useState(false);
    return (
      <li className="nav-item">
        <a href="#" className="icon-button" onClick={() => setOpen(!open)}>
          {props.icon}
        </a>
        {open && props.children}
      </li>
    );
  }

  function DropdownMenu(props) {
    function DropdownItem({ onClick, children }) {
      return (
        <a href="#" className="menu-item" onClick={onClick}>
          <span className="icon-button">{props.leftIcon}</span>
          {children}
        </a>
      );
    }

    return (
      <div className="dropdown">
        <DropdownItem onClick={() => props.onStateChange(0)}>N/A Service</DropdownItem>
        <DropdownItem onClick={() => props.onStateChange(1)}>Time Service</DropdownItem>
        <DropdownItem onClick={() => props.onStateChange(2)}>Youtube Service</DropdownItem>
        <DropdownItem onClick={() => props.onStateChange(3)}>weather Service</DropdownItem>
        <DropdownItem onClick={() => props.onStateChange(4)}>Reddit Service</DropdownItem>
        <DropdownItem onClick={() => props.onStateChange(5)}>Reddit2 Service</DropdownItem>
        <DropdownItem onClick={() => props.onStateChange(6)}>Reddit3 Service</DropdownItem>
      </div>
    );
  }

  return (
    <React.Fragment>
      {/* 每个WidgetStatus独立管理自身状态 */}
      <WidgetStatus num="4766">
        {(setPOLState) => (
          <Navbar>
            <NavItem icon="Choice">
              <DropdownMenu onStateChange={(choice) => setPOLState(choice)} />
            </NavItem>
          </Navbar>
        )}
      </WidgetStatus>

      <WidgetStatus num="4767">
        {(setPOLState) => (
          <Navbar>
            <NavItem icon="Choice">
              <DropdownMenu onStateChange={(choice) => setPOLState(choice)} />
            </NavItem>
          </Navbar>
        )}
      </WidgetStatus>

      <Navbar>
        <NavItem icon="Choice">
          <DropdownMenu number="4768"></DropdownMenu>
        </NavItem>
      </Navbar>
      <div>{machin + 1}</div>
      {/* 新增按钮测试machin状态持久化 */}
      <button onClick={() => setMachin(prev => prev +1)}>Increase Machin</button>

      <WidgetStatus num="4769">
        {(setPOLState) => (
          <Navbar>
            <NavItem icon="Choice">
              <DropdownMenu onStateChange={(choice) => setPOLState(choice)} />
            </NavItem>
          </Navbar>
        )}
      </WidgetStatus>

      <WidgetStatus num="4770">
        {(setPOLState) => (
          <Navbar>
            <NavItem icon="Choice">
              <DropdownMenu onStateChange={(choice) => setPOLState(choice)} />
            </NavItem>
          </Navbar>
        )}
      </WidgetStatus>

      <WidgetStatus num="4771">
        {(setPOLState) => (
          <Navbar>
            <NavItem icon="Choice">
              <DropdownMenu onStateChange={(choice) => setPOLState(choice)} />
            </NavItem>
          </Navbar>
        )}
      </WidgetStatus>
    </React.Fragment>
  );
}

export default App;

关键改动说明 #

1. 改用函数组件+hooks：把WidgetStatus改成函数组件，用useState管理状态，每个组件实例独立维护自己的状态，React会自动处理渲染更新。
2. 通过回调传递状态修改方法：利用组件的children回调，把状态修改函数传递给父级，让下拉菜单可以直接触发状态更新，不需要全局实例。
3. 修复DropdownItem点击事件：现在DropdownItem会接收并绑定onClickprops，点击菜单选项终于能触发状态变化了。
4. 用useState持久化machin状态：替换普通let变量，现在点击按钮可以正常增加machin的值，状态不会被反复重置。
5. 正确渲染组件：所有组件都用<Component />的方式渲染，让React接管组件的生命周期和渲染逻辑。

内容的提问来源于stack exchange，提问作者Aldric Liottier