React 挂钩形式 - 如果组合框中的元素少于 2 个，则观察方法重新呈现

Question

今天我遇到了一个非常奇怪的问题，我无法解决。我正在使用反应查询来为我的组合框获取数据。

const { isLoading, data } = useQuery('loadBranchBICRMA', loadBranchBIC)

并且我正在使用 form.watch 来捕获我的组合框中是否发生任何变化，因为如果发生了一些变化，我将检查我的数据库并填写表格的其余部分（如果匹配）。

const receiverBIC = form.watch('ReceiverBIC');
const senderBIC = form.watch("SenderBIC") ;
const [branchColumns] = React.useState(['none']);
const [messageTypeColumns] = React.useState(['accptdMsg','declndMsg']);

const validateRMA = () => {
    const URL = VALIDATE_RMA + `/${senderBIC}/${receiverBIC?.length === 8 ? receiverBIC+"XXX": receiverBIC}`
    axios.get(URL, {httpsAgent})
        .then((response) => {
            if (response.data !== ''){
                setSelectedAcceptedMessages(response.data.accptdMsg);
                setSelectedDeclinedMessages(response.data.declndMsg);
                setIsSave(true)
            }else setIsSave(false);
        }).catch();
}

useEffect(() => {if ( receiverBIC?.length !== 0 ) {validateRMA();}}, [receiverBIC,senderBIC]);

问题是如果我的组合框中的元素少于 2 个，form.watch 会重新呈现并使我的应用程序崩溃。奇怪的是为什么有 2 个元素 :D 任何帮助都会救我。

Answer 1

我仍然不明白为什么组合框中的项目少于 2 时会出现此问题，但解决方案是使用 useWatch 而不是 watch。它解决了我所有的问题。

React 挂钩形式 - 如果组合框中的元素少于 2 个，则观察方法重新呈现

React hook form - watch method rerender if there is less than 2 element in combobox

javascript

reactjs

react-hooks

react-hook-form

react-query