更新状态并在点击时获取数据（使用状态挂钩）

Question

我想（通过与表单交互）更新：

• 对象的状态（表单的新值）
• 获取数据以通过 (Django) REST 将其发送到数据库

这是表格：

<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})

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

非常感谢:)

Answer 1

您的问题似乎来自 React 状态更新的异步特性：当您调用 setTheme(out) 时，theme 不会立即更新为 out 的值，稍后会为下一次渲染更新。

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

body: JSON.stringify({
              out
          }),

不是

body: JSON.stringify({
              theme
          }),

您可以在React FAQ about State 上阅读有关 React 状态更新异步行为的更多信息。