Question

我正在使用 Context API 将用户详细信息从表单添加到全局状态。当我提交表单时，状态总是“落后一步” - 本质上，需要双击才能获得所需的结果。

代码的基本重新创建（删除了不相关的部分和一些导入）：

import { UserProvider, UserContext } from "../../StateContext"

export default function SignUp() {
  const user = useContext(UserContext)
  const history = useHistory()

  const handleSubmit = (e) => {
    e.preventDefault()
    user.setName(userDetails.name)
    //logging out the user object here will result in the previous values shown

  }

  const [userDetails, setUserDetails] = useState({
    name: null,
    age: null,
  })
  return (
    <>
      <form onSubmit={handleSubmit}>
        <div className="form-vertical-batch">
          <FormControl>
            <Input
              type="text"
              placeholder="Your Name"
              required={true}
              onChange={(e) =>
                setUserDetails({ ...userDetails, name: e.target.value })
              }
            ></Input>

            <FormHelperText>
              Put the name you're best known by online - either a nickname,
              brand name, or your real name.
            </FormHelperText>
          </FormControl>
          <FormControl>
            <TextField
              type="number"
              inputProps={{ min: 18, max: 99 }}
              onChange={(e) =>
                setUserDetails({ ...userDetails, age: e.target.value })
              }
            />
            <FormHelperText>
              You currently must be at least 18 years old to use the platform.
            </FormHelperText>
          </FormControl>
        </div>
 
        </div>

        <input
          id="formButton"
          className="btn sign-up-button"
          type="submit"
          placeholder="Send message"
        />
      </form>
    </>
  )
}

在这里澄清这个问题 - 如果我提交一个名称为“Reikon”并记录我们的用户对象，第一次它将返回为空，然后第二次它将按预期返回“Reikon”。< /p>

在 OnSubmit 函数期间 React 上下文更新未触发？

0 个答案: