如何解决在反应中使用发布订阅可以使组件卸载和挂载
我正在尝试在reactjs中实现pubsub(publish-subscribe)。每次侦听事件时,都会卸载组件,然后再次安装。以下是组件:
ComponentA
单击按钮时,发布带有有效内容(即项目)的事件。
import PubSub from 'pubsub-js';
import React from 'react';
import { Button } from 'react-native';
interface ComponentAProps {}
const ComponentA: React.FC<ComponentAProps> = ({}) => {
return (
<Button
title="add items"
onPress={() => {
console.log('published')
PubSub.publish('ADD_ITEMS',{ item: { title: 'someItem' } })
}
}
/>
);
};
export default ComponentA;
ComponentB
侦听事件(如果有),将有效负载添加到项目中。 渲染项目。
import React,{ useEffect,useState } from 'react';
import { Text,View } from 'react-native';
interface ComponentBProps {}
interface IItem {
title: string;
}
type IItems = IItem[];
const ComponentB: React.FC<ComponentBProps> = ({}) => {
const [items,setItems] = useState<IItems>([]);
useEffect(() => {
console.log('mounted');
/**
* add item to items
*/
PubSub.subscribe('ADD_ITEMS',(item: IItem) => {
setItems([...items,item]);
});
return () => {
console.log('unmounted');
PubSub.unsubscribe('ADD_ITEMS');
};
});
let renderItems = items.map((item) => (
<View>
<Text>{item.title}</Text>
</View>
));
return <View>{renderItems}</View>;
};
export default ComponentB;
如果单击按钮3次,则为以下日志的输出:
- 已安装
- 已发布
- 未安装
- 已安装
- 已发布
- 未安装
- 已安装
- 已发布
- 未安装
- 已安装
解决方法
您是否尝试过在useEffect中添加第二个参数以便像componentDidMount一样使用它?我说的是空数组[]。现在,您实现它的方式与componentDidUpdate相同,并在每次重新渲染时运行。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。