using rxjs debounceTime with react hooks

Question

我正在尝试将 rxjsdebounceTime与反应钩子一起使用。 这是我到目前为止的代码

const searchFriendSubject = new Subject();
const subscription = searchFriendSubject.pipe(debounceTime(1500)).subscribe(val => {
console.log('This is the value ', val);
});
const friendComponent = () => {
const [formData, setSearchTerm] = useState({
searchTerm: { value: '', valid: true }
});
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
const formDataToSet = {
...formData,
...{ searchTerm: { valid: true, value: newValue } }
};
setSearchTerm(formDataToSet);
searchFriendSubject.next(newValue);
};
useEffect(() => {
const subscription = searchFriendSubject.pipe(debounceTime(1500)).subscribe(val => {
console.log('This is the value ', val);
});
return () => {
subscription.unsubscribe();
};
});
return (
<FriendSearchComponentStyles.containerBlock>
<input
type="text"
onChange={onChange}
></input>
</FriendSearchComponentStyles.containerBlock>
);
};

问题是订阅根本不会触发。 如果我从effect中删除subscription.unsubscribe();，则订阅可以工作但会触发很多次。

Answer 1

除了 wentjun 提到的重复订阅之外，您的主要问题是您对效果没有依赖数组，因此它会在每次渲染时取消订阅/重新订阅。

useEffect(() => {
const subscription = searchFriendSubject.pipe(debounceTime(1500)).subscribe(val => {
console.log('This is the value ', val);
});
return () => {
subscription.unsubscribe();
};
}, []);

如果只想在装载时订阅并在卸载时取消订阅，则传递空数组。 或者，如果您想在这些道具更改时重新订阅，请传递一些道具值。