reactjs - 状态触发时的 useEffect 清理
问题描述
我有一个通过状态对象触发的组件:
const Alerts = () => {
const alert = useStore((state) => state.alert);
const setAlert = useStore((state) => state.setAlert);
const alertsModalRef = useRef(null);
useEffect(() => {
console.log("TRIGGER");
if (alert) {
alertsModalRef.current?.present();
}
}, [alert]);
...
我通过从不同屏幕上的另一个组件单击按钮来触发它。例如:
export function UpdateSomething() {
const setAlert = useStore((state) => state.setAlert);
return (
<View>
<Button
title="Continue"
onPress={() => {
setAlert("something");
}}
/>
</View>
);
}
当我加载我的应用程序并点击触发按钮时,我看到“TRIGGER”被打印到控制台一次。但是,当我转到另一个屏幕并点击另一个按钮时,甚至当我返回第一个屏幕并再次点击同一个按钮时,它会打印三次“TRIGGER”。
我怀疑我需要添加某种清理方法useEffect
- 但如果是这样,那里需要什么清理?如果不是这样呢?到底是怎么回事?
抱歉,我意识到这可能已经以各种形式被问过一百万次了。我阅读了文档和许多帖子,但仍然感到困惑。
更新 1
正如 Drew 建议的那样,我测试并看到Alerts
每当我访问我的应用程序中使用 React Navigation 的屏幕时都会重新安装该组件。我还使用以下提供程序包装每个屏幕:
航海家
const WrappedSearchScreen = withModalProvider(SearchScreen);
function SearchNavigator() {
const SearchStack = createStackNavigator();
return (
<SearchStack.Navigator>
<SearchStack.Screen
name="Search"
component={WrappedSearchScreen}
/>
...
</SearchStack.Navigator>
);
}
提供者
...
import { Alerts } from "./Alerts";
import { useStore } from "./store";
export const withModalProvider = (Component: FC) => () => {
const progressBarVisible = useStore((state) => state.progressBarVisible);
return (
<BottomSheetModalProvider>
<Component />
<Alerts />
<ProgressBar
indeterminate
color="green"
visible={progressBarVisible}
style={{ position: "absolute", bottom: 0, left: 0 }}
/>
</BottomSheetModalProvider>
);
};
解决方案
推荐阅读
- java - 为什么我的 REST 服务器中的响应状态为 204 No content?
- python - Python pandas 将质心数据合并回数据框
- python - “TypeError:无法将 'list' 对象隐式转换为 str” 谁能看到什么可以修复我的代码?
- amazon-cloudformation - 将 HostedZone NameServers 指定为 CloudFormation 输出
- mongodb - Mongodb更新子文档字段以更好的方法比较更新
- sql-server - SQL Server 加入查询 DateCompleted > 3 年前
- r - 使用带有 x 轴的基 R 的堆叠/闪避条形图是数值数据
- java - spring boot和tomcat - 找不到文件
- vmware - 用于监控库存的 vCeter API
- c++ - 使用高级语言对静态 C++ 库进行单元测试?