如何将React中useState的setSubTitle从Dashboard组件传递到ReportHeader组件？

一、先修正Dashboard组件的状态更新问题 #

你的原Dashboard代码存在无限重渲染的问题：直接在组件函数体中调用setSubTitle会触发状态更新，状态更新又会导致组件重新渲染，循环往复。需要用useEffect包裹状态更新逻辑，仅在依赖项变化时执行：

import { useState, useEffect } from 'react';

function Dashboard(props) {
    const [subTitle, setSubTitle] = useState(SUBTITLES.default);

    useEffect(() => {
        // 根据路径动态设置副标题
        if (location.pathname === `${PATH_TO_SM_PROFILE}/${profileId}`) {
            setSubTitle('Stakeholder Profile');
        } else if (location.pathname === `${PATH_TO_CAPABILITY_PACK}/${reportid}`) {
            setSubTitle('Test');
        } else {
            setSubTitle(SUBTITLES[location.pathname] || SUBTITLES.default);
        }
    }, [location.pathname, profileId, reportid]); // 依赖项变化时才执行更新

    // 渲染ReportHeader并传递setSubTitle
    return (
        <div>
            <ReportHeader 
                cpId={/* 对应cpId值 */} 
                capabilitypackname={/* 对应名称值 */}
                setSubTitle={setSubTitle} // 将setSubTitle作为props传递
            />
            {/* Dashboard其他内容 */}
        </div>
    );
}

二、在ReportHeader.js中接收并使用setSubTitle #

修改ReportHeader的props定义，新增setSubTitle参数，之后就可以在组件内部调用它来更新Dashboard中的subTitle状态：

const ReportHeader = ({ cpId, capabilitypackname, setSubTitle }) => {
    // 示例：通过按钮点击修改副标题
    const updateSubTitle = () => {
        setSubTitle('自定义副标题内容');
    };

    return (
        <div className="report-header">
            <h3>{capabilitypackname}</h3>
            <button onClick={updateSubTitle}>切换副标题</button>
            {/* ReportHeader其他内容 */}
        </div>
    );
};

核心逻辑说明 #

• 传递：在Dashboard中渲染ReportHeader时，将setSubTitle作为普通props传递，和cpId、capabilitypackname的传递方式一致。
• 使用：ReportHeader通过解构props拿到setSubTitle后，可在事件处理、useEffect等场景中调用它，直接修改Dashboard组件中subTitle的状态值。

内容的提问来源于stack exchange，提问作者Kavitha T