使用切换开关做出反应来更改同级组件的状态

Question

我正在开发一个应用程序，我想将值从磅更改为公斤。我目前将状态设置为磅，并尝试添加一个切换开关，允许用户在磅和公斤之间切换。我在兄弟组件之间传递状态时遇到问题。

这是我的代码：

const HomePage = (props) => {
    const {
        movements
    } = props;

    const convertToKg = (_id) => {
        const kg = movements.map((movement) => {
            return {_id: movement._id, movementName: movement.movementName, movementWeight: movement.movementWeight * 0.453592}   
        })
        return kg;
    } 

   return (
       <div>
            <div>
                <MovementButtons movements={movements} />
            </div>
            <div>
                <WeightConverter onClick={convertToKg} />
            </div> 
       </div>
   );
};

export default HomePage;

和我的拨动开关代码：

const WeightConverter = (props) => {
    const {
        onClick
    } = props;
    
    return (
        <div>
            lb
            <Switch 
                onClick={onClick}
                >  
            </Switch>
            kg
        </div>   
    )
};

我什至不确定我是否正确使用了切换开关。

基本上我想要的是当切换开关被激活时“运动”状态更改为convertToKg的结果，然后在切换回来时返回到原始状态。如果我需要显示更多代码或回答任何问题，请询问。我只需要朝正确的方向推动。

Answer 1

你的方向有点正确，但这是你所犯的错误：

1. 你的函数convertToKg将把每个重量转换为公斤，但这里没有切换逻辑，你不能从这个函数返回到磅。
2. 对于切换，您需要保持当前是否需要切换到公斤或磅的状态
3. 你的函数convertToKg工作正常，但反应不知道它，你没有将对象传递回movementlist；为此使用 useState

我希望你探索一下：

1. 利用状态逻辑对跟踪单位（公斤或磅）做出反应
2. 而不是改变整个对象；将此单位传递给您的动作，然后将转换逻辑应用于该特定单位

我希望这会有所帮助，我不会直接给您代码，因为您要求直接推送，但如果您需要一些额外的帮助，请回复。