React中使用toggle switch修改兄弟组件state的问题

你当前的核心问题在于：

• 未在父组件维护单位切换的状态，也未保留原始movements数据，导致切换回磅时无法恢复原值
• Toggle Switch的使用方式不符合表单控件规范，未通过状态绑定选中状态
• 兄弟组件间的状态共享缺少父组件作为中间层传递

以下是具体的修改方案：

1. 父组件HomePage添加状态管理 #

在父组件中维护单位状态和原始数据备份，动态计算显示用的数值，避免修改原始props数据：

import { useState, useEffect } from 'react';

const HomePage = (props) => {
    const { movements } = props;
    // 保存原始磅单位数据，用于切换回原单位时恢复
    const [originalMovements, setOriginalMovements] = useState([]);
    // 标记当前是否使用千克单位
    const [isKg, setIsKg] = useState(false);

    // 初始化时缓存原始数据
    useEffect(() => {
        setOriginalMovements(movements);
    }, [movements]);

    // 根据当前单位返回对应显示数据
    const getDisplayMovements = () => {
        if (!isKg) return originalMovements;
        // 转换为千克，不修改原始数据
        return originalMovements.map(movement => ({
            ...movement,
            movementWeight: movement.movementWeight * 0.453592
        }));
    };

    // 切换单位的回调函数
    const toggleUnit = () => {
        setIsKg(prev => !prev);
    };

    return (
        <div>
            <div>
                {/* 传递处理好的显示数据给子组件 */}
                <MovementButtons movements={getDisplayMovements()} />
            </div>
            <div>
                {/* 传递状态和切换回调给开关组件 */}
                <WeightConverter isKg={isKg} onToggle={toggleUnit} />
            </div> 
        </div>
    );
};

export default HomePage;

2. 修改WeightConverter组件 #

让开关组件绑定状态，通过onChange触发切换，符合表单控件的标准用法：

const WeightConverter = (props) => {
    const { isKg, onToggle } = props;
    
    return (
        <div>
            lb
            <Switch 
                checked={isKg}
                onChange={onToggle}
            />  
            kg
        </div>   
    )
};

关键说明 #

• 永远不要直接修改props中的数据，必须保留原始数据备份，否则切换回原单位时无法恢复
• 单位切换状态isKg放在父组件作为共享状态，通过props传递给所有需要的子组件
• Switch组件使用checked绑定状态，onChange触发状态切换，而非onClick（这是表单控件的标准交互逻辑）
• 动态计算显示数据，避免重复转换和状态冗余，仅在需要显示时根据当前单位转换数值

修改后即可实现：

• 切换开关时自动切换磅/千克单位的数值显示
• 切换回原状态时自动恢复原始磅单位数据
• 兄弟组件间通过父组件状态实现数据同步

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