我必须点击按钮两次张贴数据到API在反应

Question

我有console.log(ed)的值，而执行和发生的事情是在第一次点击，inputValue发送一个空字符串到api，然后在下一次点击的inputValue与字符串发送到api。我已经改变了inputValue的值使用设置函数在输入标签与onChange函数，然后我已经调用了api，所以我如何修复它，所以它发送它在第一次点击。

const InputEmail = () => {
const navigate = useNavigate()
const [inputValue, setInputValue] = useState('')
const [apiData, setApiData] = useState('')
const [isError, setIsError] = useState(false)
// useEffect(() => {
//   //API()
// }, [])
const API = () => {
console.log(inputValue)
axios
.post(url, {
email: inputValue
})
.then((response) => {
setApiData(response.data)
})   
console.log(apiData.is_active)
}

const handleSubmit = () => {
API()
if(apiData.is_active) {
localStorage.setItem('email',inputValue)
navigate("/assessment")
} else {
setIsError(true)
}
}
return (
<div className='main'>
<FormControl>
<h2 className='text'>Registered Email address</h2>
<Input id='email' type='email' value={inputValue} onChange={e => setInputValue(e.target.value)}/>
{
isError ? <FormHelperText color='red'>Email not found. Please enter registered email</FormHelperText> : null
}
<Button
mt={4}
colorScheme='teal'
type='submit'
onClick={handleSubmit}
>
Submit
</Button>
</FormControl>
</div>
)
}

Answer 1

必须等待axios在生成句柄之前从url获取数据。如果你等待async API()函数带来数据，它将工作。

const API = () => {
return axios.post(url, {
email: inputValue,
});
};
const handleSubmit = async () => {
const response = await API();
if (response.data.is_active) {
localStorage.setItem("email", inputValue);
navigate("/assessment");
} else {
setIsError(true);
}
};