React Native页面挂载后意外重复渲染 传参状态丢失问题排查

我在使用React Native（RN）对接Philips Hue API开发时遇到异常，项目采用Tab导航嵌套Stack导航的结构：其中一个Tab页内嵌的Stack导航包含两个页面，"All Lights"页面负责展示所有接入网关的灯具，点击单个灯具即可跳转至LightDetail详情页。

以下是"All Lights"页面代码：

<FlatList
data={allLights}
renderItem={({ item, index }) => {
console.log(item, "from light icon");
return (
<TouchableOpacity
onPress={() =>
navigation.navigate("LightDetail", {
lightbulb: item,
lightId: index + 1,
                })
}
>
<LightBulb
lightName={item.name}
isOn={item.state.on}
lightId={index + 1}
/>
</TouchableOpacity>
          );
        }}
/>

跳转时我将灯具数据作为lightbulb参数、灯具序号作为lightId参数传递给详情页。

以下是"Light Detail"详情页代码：

export const LightDetailScreen = ({ route }) => {
    const { lightbulb, lightId } = route.params;
    console.log(lightbulb.state.sat, lightbulb.state.bri, "from params");
    const [lightBulbState, setLightBulbState] = useState({
        sat: lightbulb.state.sat,
        hue: lightbulb.state.hue,
        bri: lightbulb.state.bri,
        isOn: lightbulb.state.on,
    });
    console.log(lightBulbState);
    const controlLight = async (lightID, on, hue, sat, bri) => {
        console.log(hue, sat, bri, "from control light");
        try {
            return await huePhil.put(`/lights/${lightID}/state`, {on,sat,bri,hue});
        } catch (err) {
            console.log(err);
        }
    };
    const toggleLight = async () => {
        setLightBulbState((prev) => {
            return { ...prev, isOn: !prev.isOn };
        });
        controlLight(
            lightId,
            lightBulbState.isOn,
            lightBulbState.hue,
            lightBulbState.sat,
            lightBulbState.bri
        );
    };
    const upDateBri = (value) => {
        setLightBulbState((prev) => {
            return { ...prev, bri: Math.floor(value) };
        });
        controlLight(
            lightId,
            lightBulbState.isOn,
            lightBulbState.hue,
            lightBulbState.sat,
            lightBulbState.bri
        );
    };
    const upDateSat = (value) => {
        setLightBulbState((prev) => {
            return { ...prev, sat: Math.floor(value) };
        });
        controlLight(
            lightId,
            lightBulbState.isOn,
            lightBulbState.hue,
            lightBulbState.sat,
            lightBulbState.bri
        );
    };
    return (
        <SafeArea>
            <View style={styles.container}>
                <Text>{lightbulb.name} </Text>
                <View style={styles.sliderContainer}>
                    <Slider
                        style={{ width: 300, height: 40 }}
                        minimumValue={0}
                        maximumValue={254}
                        minimumTrackTintColor="#FFFFFF"
                        maximumTrackTintColor="#000000"
                        value={lightbulb.state.sat}
                        onValueChange={upDateSat}
                    />
                    <Text>Saturation: {lightBulbState.sat || lightbulb.state.sat}</Text>
                </View>
                <View style={styles.sliderContainer}>
                    <Slider
                        style={{ width: 300, height: 40 }}
                        minimumValue={0}
                        maximumValue={254}
                        minimumTrackTintColor="#FFFFFF"
                        maximumTrackTintColor="#000000"
                        value={lightbulb.state.bri}
                        onValueChange={upDateBri}
                    />
                    <Text>Brightness: {lightBulbState.bri || lightbulb.state.bri}</Text>
                </View>
                <View style={styles.btnContainer}>
                    <Button
                        title={lightBulbState.isOn ? "currently on" : "currently off"}
                        onPress={toggleLight}
                    />
                </View>
            </View>
        </SafeArea>
    );
}

页面中设置的三处日志打印点，在未触发任何用户操作的情况下各打印了3次，异常日志内容如下：

93 71 from params
Object {
"bri": 71,
"hue": 8417,
"isOn": true,
"sat": 93,
}
8417 93 71 from control light
93 71 from params
Object {
"bri": 71,
"hue": 8417,
"isOn": true,
"sat": 0,
}
8417 0 71 from control light
93 71 from params
Object {
"bri": 0,
"hue": 8417,
"isOn": true,
"sat": 0,
}

预期日志仅打印1次，且传入的参数值保持初始数值不变，但实际第二次打印时sat饱和度值变为0，第三次打印时bri亮度值也变为0，未进行任何操作就触发了controlLight接口调用与状态更新，导致页面重复渲染、数据异常。需要定位问题产生原因，获得对应的解决方向。

一共两个核心问题导致异常：

1. Slider组件初始挂载自动触发回调
   React Native生态常用的Slider组件（包括官方维护的@react-native-community/slider）在首次渲染挂载时，会默认触发一次onValueChange，回调传入的初始值为0，和绑定的value属性无关。这就是无操作时upDateSat、upDateBri被依次调用，把sat、bri值重置为0的直接原因。
2. 状态更新闭包陷阱
   调用setLightBulbState之后立刻读取lightBulbState传参，拿到的是更新前的旧状态，不是set执行后的新值，会导致接口请求参数和本地状态不一致，触发额外的异常渲染。
3. Slider的value属性直接绑定路由传入的固定参数，没有绑定本地state，后续滑动操作时滑块位置不会跟随状态同步更新。

• 增加挂载标记，拦截Slider首次挂载阶段自动触发的无效onValueChange回调
• 修正状态更新逻辑，在setState的更新计算流程中直接拿新值触发接口请求，避免闭包导致的参数错误
• 将Slider的value属性绑定本地state，保证交互时视图和状态同步
• 用useCallback包裹接口请求方法，减少不必要的重复渲染

修复后的核心代码参考：

export const LightDetailScreen = ({ route }) => {
    const { lightbulb, lightId } = route.params;
    const [lightBulbState, setLightBulbState] = useState({
        sat: lightbulb.state.sat,
        hue: lightbulb.state.hue,
        bri: lightbulb.state.bri,
        isOn: lightbulb.state.on,
    });
    // 挂载标记，拦截Slider初始触发的无效回调
    const isMounted = useRef(false);

    const controlLight = useCallback(async (lightID, params) => {
        try {
            return await huePhil.put(`/lights/${lightID}/state`, params);
        } catch (err) {
            console.log(err);
        }
    }, []);

    const toggleLight = () => {
        setLightBulbState((prev) => {
            const newState = { ...prev, isOn: !prev.isOn };
            // 直接用计算出的新状态发请求，规避闭包问题
            controlLight(lightId, {
                on: newState.isOn,
                sat: newState.sat,
                bri: newState.bri,
                hue: newState.hue
            });
            return newState;
        });
    };

    const upDateBri = (value) => {
        // 首次渲染阶段的自动触发直接拦截
        if (!isMounted.current) return;
        const bri = Math.floor(value);
        setLightBulbState((prev) => {
            const newState = { ...prev, bri };
            controlLight(lightId, {
                on: newState.isOn,
                sat: newState.sat,
                bri: newState.bri,
                hue: newState.hue
            });
            return newState;
        });
    };

    const upDateSat = (value) => {
        if (!isMounted.current) return;
        const sat = Math.floor(value);
        setLightBulbState((prev) => {
            const newState = { ...prev, sat };
            controlLight(lightId, {
                on: newState.isOn,
                sat: newState.sat,
                bri: newState.bri,
                hue: newState.hue
            });
            return newState;
        });
    };

    useEffect(() => {
        // 首次渲染完成后放开回调拦截
        isMounted.current = true;
        return () => {
            isMounted.current = false;
        }
    }, []);

    return (
        <SafeArea>
            <View style={styles.container}>
                <Text>{lightbulb.name} </Text>
                <View style={styles.sliderContainer}>
                    <Slider
                        style={{ width: 300, height: 40 }}
                        minimumValue={0}
                        maximumValue={254}
                        minimumTrackTintColor="#FFFFFF"
                        maximumTrackTintColor="#000000"
                        // value绑定本地state，保证交互同步
                        value={lightBulbState.sat}
                        onValueChange={upDateSat}
                    />
                    <Text>Saturation: {lightBulbState.sat}</Text>
                </View>
                <View style={styles.sliderContainer}>
                    <Slider
                        style={{ width: 300, height: 40 }}
                        minimumValue={0}
                        maximumValue={254}
                        minimumTrackTintColor="#FFFFFF"
                        maximumTrackTintColor="#000000"
                        value={lightBulbState.bri}
                        onValueChange={upDateBri}
                    />
                    <Text>Brightness: {lightBulbState.bri}</Text>
                </View>
                <View style={styles.btnContainer}>
                    <Button
                        title={lightBulbState.isOn ? "currently on" : "currently off"}
                        onPress={toggleLight}
                    />
                </View>
            </View>
        </SafeArea>
    );
}

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