使用 Axios 使用 Formik 发布数据时的挂钩调用无效

问题描述

总结问题

我的代码的目标是将表单数据发布到我的 REST API：/api/profiles/<:id>。

我使用 Formik 处理所有需要用表单完成的工作，并使用 axios 获取当前用户的 id 然后填写正确的 REST API url，以及执行对该 REST API 的 POST 请求。实际结果是一条错误消息，指出我使用了无效的钩子调用。这是错误的图片：

描述您尝试过的内容

我去了 React 网站，那里提到了几种调试情况的方法：https://reactjs.org/warnings/invalid-hook-call-warning.html

我发现我写的代码实际上有两份 react 包。因此，我转到此堆栈溢出以查看如何修复它：Duplicate ReactJS import issue when using npm link to test component before publishing as npm package 但是当我按照接受的答案进行操作时，我收到一条错误消息，指出该操作被我的操作系统 (macOS) 拒绝。接受的答案还谈到拥有一个本地图书馆，但我认为我从未使用过它，所以我觉得我的问题的解决方案在于我的代码中的某处。

显示一些代码

  postText: Yup.string().required("required"),message: Yup.string().required("required")
});



function getProfile(){
  const [profiles,setProfiles] = useState([])

  useEffect(() => {
      const p = getProfile(window.REP_LOG_APP_PROPS.user_id)
      const api = axios.create({
        baseURL: 'http://127.0.0.1:8000/api/profiles/' + p.id
      })
      axios.get(api)
          .then(res =>{
              console.log(res)
              setProfiles(res.data)
          })
          .catch(err => {
              console.log(err)
          })
  },[])
  return (
                  profiles

  )
}

export default function CreatePost()  {
  /* Server State Handling */
  const [serverState,setServerState] = useState();
  const handleServerResponse = (ok,msg) => {
    setServerState({ok,msg});
  };
  const p = getProfile(window.REP_LOG_APP_PROPS.user_id)
  const api = axios.create({
    baseURL: 'http://127.0.0.1:8000/api/profiles/' + p.id
  })
  const handleOnSubmit = (values,actions) => {
    axios({
      method: "POST",url: api,data: values
    })
      .then(response => {
        actions.setSubmitting(false);
        actions.resetForm();
        handleServerResponse(true,"Thanks!");
      })
      .catch(error => {
        actions.setSubmitting(false);
        handleServerResponse(false,error.response.data.error);
      });
  };
  return (
    <div>
      <h1>Create a Post</h1>
      <Formik
        initialValues={{ postText: "Post something inspiring..."}}
        onSubmit={handleOnSubmit}
        validationSchema={formSchema}
      >
        {({ isSubmitting }) => (
          <Form id="fs-frm" novalidate>
            <label htmlFor="postText">This is the label here</label>
            <Field id="postText" name="postText" component="textarea" />
            <ErrorMessage name="postText" className="errorMsg" component="p" />
            <button type="submit" disabled={isSubmitting}>
              Post
            </button>
            {serverState && (
              <p className={!serverState.ok ? "errorMsg" : ""}>
                {serverState.msg}
              </p>
            )}
          </Form>
        )}
      </Formik>
    </div>
  );

};```

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）