为什么当我对主题执行'next'方法时没有调用我的订阅函数

Question

我想对表单的一个字段进行后端验证，为此我制作了将侦听此字段的更改并且在某些情况下必须进行后端调用的钩子。

这是我定义的React钩子。

使用OnChangeDebounce.ts文件

export default function (callBack: (v: string | undefined) => void, time = 500) {
const subject = new Subject<string | undefined>()
useEffect(() => {
const sub = subject
.pipe(
distinctUntilChanged(),
debounceTime(time)
)
.subscribe(callBack)
return () => {
sub.unsubscribe()
}
}, []);
return (e: ChangeEvent<HTMLInputElement>) => {
subject.next(e.target.value)
}
}

组件中：

...
const valueChange = useOnChangeDebounce((v) => {
// this part is not executed when I type in the input
console.log(v)
})
return (
...
<input type="text" onChange={valueChange}/>
...
)
...

Answer 1

我认为您需要使用具有空依赖关系的useMemo来保留主题引用，否则每次调用hook时都会创建新实例。请尝试const subject = useMemo(() => new Subject(), [])。