React中点击按钮调用子组件失效问题求助

你的代码没法实现点击按钮显示子组件的核心问题是用错了React组件渲染逻辑——事件处理函数返回JSX不会自动替换当前组件内容，得用状态来控制渲染切换。另外代码里还有几个语法和逻辑错误，下面一步步修正：

父组件StartPage修正 #

1. 引入useState管理页面切换状态
2. 移除return语句末尾多余的分号
3. 点击按钮时切换状态，根据状态决定渲染初始内容还是子组件

修正后的代码：

import { useState } from 'react';
import MakeQuizePage from './makeQuizePage';

function StartPage() {
    const [showQuiz, setShowQuiz] = useState(false);

    function nextPage() {
        setShowQuiz(true);
    }

    // 根据状态渲染对应内容
    if (showQuiz) {
        return <MakeQuizePage />;
    }

    return (
        <>
            <h1 className="my-5 fs-1 text-danger text-center">کی از همه خبیث تره</h1>
            <div className="my-5 text-center">
                <button onClick={nextPage} className="shadow btn p-4 btn-lg col-3 text-center">start</button>
            </div>
        </>
    )
}
export default StartPage;

子组件MakeQuizePage修正 #

1. 将nextPageMaker函数移到return语句之前，否则代码永远不会执行到这个函数
2. 给map循环的元素添加唯一key属性（React强制要求）
3. 修复单选按钮结构，添加name属性保证单选功能正常，同时绑定点击事件触发页面切换
4. 限制pageCount的最大值，避免数组越界

修正后的代码：

import { useState } from "react";
const MakeQuizePage = () => {
    const [pageCount, setPageCount] = useState(0);
    const questionAndRezults = [
        [
            'asa', '选项1', '选项2'
        ],
        [
            'akks', '选项A', '选项B'
        ]
    ];

    const nextPageMaker = () => {
        // 防止pageCount超出数组长度
        if (pageCount < questionAndRezults.length - 1) {
            setPageCount(prev => prev + 1);
        }
    }

    const currentQuestion = questionAndRezults[pageCount];

    return (
        <>
            <p className='text-center'>{currentQuestion[0]}</p>
            {currentQuestion.slice(1).map((option, index) => (
                <div key={index} className='text-center mb-2'>
                    <label>
                        <input className="form-check-input me-2" type="radio" name="question-option" value={option} />
                        {option}
                    </label>
                </div>
            ))}
            <div className="text-center mt-4">
                <button onClick={nextPageMaker} className="btn btn-primary">下一题</button>
            </div>
        </>
    )
}
export default MakeQuizePage;

关键逻辑说明 #

• React组件渲染由状态驱动：通过useState维护showQuiz状态，点击按钮切换状态后，组件会重新渲染并返回对应内容。
• 子组件中函数必须定义在return之前：return之后的代码永远不会被执行，会导致函数无法调用。
• map循环必须添加key：帮助React识别元素变化，避免不必要的重渲染。

内容的提问来源于stack exchange，提问作者Smail Niaye