在成功获取请求后，如何重置处于 React 状态的数组？

Question

因此，我从

textarea

收集手机号码：这些值保存在状态中。 我将验证它们和/或根据它们是否已有前缀添加国家/地区前缀。对于每个经过验证的数字，我想将其存储在一个数组中。 在

fetch

调用中提交数组中的数据后，我希望将数组的内容重置为空数组，以准备好接收一批新的数字。

我已将问题分解为两个函数。一个用于处理号码，另一个用于拨打

fetch

电话

.
.
.
const [phoneNos, setPhoneNos] = useState('') // values from the textbox
const [validatedPhoneNos, setValidatedPhoneNos] = useState([]); // array to hold validated numbers

function addPhoneNosToDB () {
        fetch(`end_point`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            mode: 'cors',
            body: JSON.stringify({
                somefield: fieldValue,
                list: validatedPhoneNos
            }),
        }).then(r => {
            toast.success('Your list was added')
            setPhoneNos('');
            setValidatedPhoneNos([])    // ***
        }).catch(err => toast.warning(err)) 
    }

//function to validate and format numbers
function procPhoneNos () {
        if (phoneNos) {
            const countryCodePattern = /^(?:\+?234|0)?(7\d{8})$/;
            const phoneNumberPattern = /^(0|\+?234)(\d{10})$/;

            let list = phoneNos.split(',').map(phoneno => phoneno.trim());

            list.forEach(phoneNumber => {
                if (phoneNumber.match(countryCodePattern)) {
                    setValidatedPhoneNos(prev => [...prev, phoneNumber])
                } else if(phoneNumber.match(phoneNumberPattern)) {
                    setValidatedPhoneNos(prev => [...prev, phoneNumber.replace(phoneNumberPattern, '234$2')]);
                } else {
                    toast.warning("One or more phone numbers not properly formatted")
                    return
                }
            });
            
                        //call the function to submit formatted numbers to db
            addPhoneNosToDB()
        } else toast.warning("you need to enter at least one phone number")
    }

对此进行测试，每当调用

addPhoneNosToDB

时，我都会得到一个空数组。如果我删除了行

***

，我确实会得到数组中的数字，但大多数情况下只有在第二次请求之后。此外，所有以前的电话号码都会保留在数组中。如何修复它，以便仅在成功的

fetch

请求后才清除数组元素？除非必要，否则最好不要使用 useEffect。 谢谢

Answer 1

您应该能够使用 useEffect 和 useCallback 和/或 memo 以及依赖项数组中的适当依赖项。相应地调用和更新状态