更新状态和获取数据onclick(与状态挂钩)

Question

我想(通过与表单交互)更新:

• 对象的状态(窗体的新值)
• 通过(Django) REST获取数据发送给DB

表格如下:

<form className="form1">
<h2>Select your theme</h2>
<select name="theme" onChange={e => submit(e)} value={theme}>
<option value="White">White</option>
<option value="Dark">Dark</option>
<CSRFToken/>
</select>
</form>

事件:

const [theme, setTheme] = useState(results.theme)
// function submit(e) {
const submit = e => {
e.preventDefault()
let out = e.target.value
setTheme(out)
fetch("/api-out/5_settings", {
credentials: 'include',
method: 'PATCH',
mode: 'same-origin',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'X-CSRFToken': csrftoken
},
body: JSON.stringify({
theme
}),
}).then((response) => {
console.log(out)
console.log(theme)
console.log(response)
return response
})
}

我的代码工作，但当我切换选项的形式(从深色到白色)，状态改变，但数据不发送到API，因为主题是未定义的。它工作后，当我再次切换。

我看到一些答案像:

setTheme({...theme, out})

但我不明白，不确定它是否适合我的问题，如果它是最近的解决方案。

Thanks so much:)

Answer 1

您的问题似乎来自React状态更新的异步性质:当您调用setTheme(out)时，theme不会立即更新out的值，它将在下次渲染时更新。

因此，如果您在函数中更新状态，并且在相同的同步函数调用期间需要该值要执行其他操作，请直接使用该值，而不是依赖于状态值。在您的情况下，您应该将请求发送到后端:

body: JSON.stringify({
out
}),

和

body: JSON.stringify({
theme
}),

你可以在React FAQ about state中阅读更多关于React状态更新异步行为的信息。