React onClick仅在重复渲染组件时生效问题求助

核心问题分析 #

你的问题出在页面渲染逻辑重复且状态传递混乱：

• 同时渲染<Home />和{renderPage()}会生成两个独立的Home组件实例，只有后者正确关联了状态更新逻辑，导致点击按钮时只有第二个组件切换页面。
• 单独用<Home />时未传递setCurrentPage，按钮点击时没有触发状态更新的入口，自然无响应。
• 单独用{renderPage()}时，你的renderPage()函数内部没有给Home组件传递setCurrentPage props，所以会报“setCurrentPage不是函数”的错误。

具体修正方案 #

1. 重构App组件的渲染逻辑

将所有页面渲染统一交给renderPage()函数处理，移除单独的<Home />标签，确保状态能正确传递到各个页面组件：

import { useState } from 'react';
import Home from './Home';
import Quiz from './Quiz';
// 导入其他需要的组件，比如得分页、高分榜页

function App() {
  // 初始化页面状态，默认显示首页
  const [currentPage, setCurrentPage] = useState('home');

  const renderPage = () => {
    // 根据currentPage的值渲染对应页面
    switch(currentPage) {
      case 'home':
        // 给Home组件传递setCurrentPage，用于切换页面
        return <Home setCurrentPage={setCurrentPage} />;
      case 'quiz':
        // 渲染测验页面，若需要可以传递题目、得分相关状态
        return <Quiz />;
      case 'score':
        // 渲染得分展示页面
        return <ScorePage />;
      case 'leaderboard':
        // 渲染高分榜页面
        return <Leaderboard />;
      default:
        // 默认回到首页
        return <Home setCurrentPage={setCurrentPage} />;
    }
  };

  return (
    <div className="App">
      {/* 只保留这一个渲染入口 */}
      {renderPage()}
    </div>
  );
}

export default App;

2. 修正Home组件的按钮逻辑

确保Home组件正确接收setCurrentPage props，并在点击按钮时触发页面切换：

function Home({ setCurrentPage }) {
  return (
    <div className="home-container">
      <h1>答题测验应用</h1>
      {/* 用箭头函数包裹，确保点击时才调用setCurrentPage */}
      <button onClick={() => setCurrentPage('quiz')}>开始测验</button>
      {/* 其他首页元素，比如高分榜入口 */}
      <button onClick={() => setCurrentPage('leaderboard')}>查看高分榜</button>
    </div>
  );
}

export default Home;

关键注意点 #

• 不要在onClick里直接写setCurrentPage('quiz')，这会导致组件渲染时就立即执行状态更新，必须用箭头函数或绑定事件处理函数。
• 确保所有需要切换页面的组件都能拿到setCurrentPage，如果是深层嵌套组件，可以考虑用Context或者状态管理库，但目前你的场景用props传递足够。

内容的提问来源于stack exchange，提问作者Potion Seller