neo4j 无法在formik中使用fetch并将数据发布到api

ie3xauqp 于 2022-11-05 发布在其他

关注(0)|答案(1)|浏览(109)

我尝试使用fetch和mutations来发布formik表单数据。我已经使用neo4j graphql库和Apollo服务器创建了我的API，现在我想使用react作为前端来将数据发布到API中。

import './App.css';
import { useFormik } from "formik" 

function App() {
  const updateNameFetch = async (name,age,sex,weight,smoking,drinking,nationality,birth_type) => {
    const query = JSON.stringify({
      query: `mutation {
          createUsers(input:{
            user_name: "${name}"
            age: ${age}
            sex: "${sex}"
            weight: ${weight}
            smoking:"${smoking}"
            drinking: "${drinking}"
            nationality:"${nationality}"
            birth_type: "${birth_type}"
          }

          ){
            users{
              user_name
            }
          }
      }
      `
    });

  const formik = useFormik({
    initialValues:{
      name:"",
      age: "",
      sex: "",
      weight:"",
      smoking:"",
      drinking:"",
      nationality:"",
      birth_type:"",
    },
    onSubmit:(values) => {
      console.log(values.name);
      fetch("graphql-newone.herokuapp.com/",{
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: query,
      })
    }
  })

  return (
    <div className="App">
<form onSubmit={formik.handleSubmit}>
  <div className='input-container'>

    <input
    id="name"
    name="name"
    type="text"
    placeholder="Name"
    onChange={formik.handleChange}
    value = {formik.values.name}
    />

<input
    id="sex"
    name="sex"
    type="text"
    placeholder="Sex"
    onChange={formik.handleChange}
    value = {formik.values.sex}
    />

<input
    id="age"
    name="age"
    type="text"
    placeholder="Age"
    onChange={formik.handleChange}
    value = {formik.values.age}
    />

<input
    id="weight"
    name="weight"
    type="text"
    placeholder="weight"
    onChange={formik.handleChange}
    value = {formik.values.weight}
    />

<input
    id="smoking"
    name="smoking"
    type="text"
    placeholder="smoking"
    onChange={formik.handleChange}
    value = {formik.values.smoking}
    />

<input
    id="nationality"
    name="nationality"
    type="text"
    placeholder="nationality"
    onChange={formik.handleChange}
    value = {formik.values.nationality}
    />

  <input
    id="birth_type"
    name="birth_type"
    type="text"
    placeholder="birth_type"
    onChange={formik.handleChange}
    value = {formik.values.birth_type}
    />

  </div>
  <button type="submit">Submit</button>
</form>
    </div>
  );
}}

export default App;

我遇到此错误，但无法更正
第28行：18：在函数“updateNameFetch”中调用了React挂钩“useFormik”，该函数既不是React函数组件，也不是自定义React挂钩函数。React组件名称必须以大写字母开头。React挂钩名称必须以单词“use”react-hooks/rules-of-hooks开头
搜索关键字以了解有关每个错误的详细信息。

neo4j

来源：https://stackoverflow.com/questions/72973726/unable-to-use-fetch-in-formik-and-post-data-to-api

1条答案

按热度按时间

lmvvr0a81#

正如它所说的，您不能在函数内部使用useFormik钩子

import './App.css';
  import { useFormik } from "formik" 

  function App() {
    const postData = async(query)=>{
      let res = await fetch("graphql-newone.herokuapp.com/",{
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: query,
      })
      let data = await res.json()
      console.log(data)
    }

    const formik = useFormik({
      initialValues:{
        name:"",
        age: "",
        sex: "",
        weight:"",
        smoking:"",
        drinking:"",
        nationality:"",
        birth_type:"",
      },
      onSubmit:async(values) => {
        let query = JSON.stringify({
          query: `mutation {
              createUsers(input:{
                user_name: "${values.name}"
                age: ${values.age}
                sex: "${values.sex}"
                weight: ${values.weight}
                smoking:"${values.smoking}"
                drinking: "${values.drinking}"
                nationality:"${values.nationality}"
                birth_type: "${values.birth_type}"
              }

              ){
                users{
                  user_name
                }
              }
          }
          `
        });
       postData(query)
      }
    })

    return (
      <div className="App">
  <form onSubmit={formik.handleSubmit}>
    <div className='input-container'>

      <input
      id="name"
      name="name"
      type="text"
      placeholder="Name"
      onChange={formik.handleChange}
      value = {formik.values.name}
      />

  <input
      id="sex"
      name="sex"
      type="text"
      placeholder="Sex"
      onChange={formik.handleChange}
      value = {formik.values.sex}
      />

  <input
      id="age"
      name="age"
      type="text"
      placeholder="Age"
      onChange={formik.handleChange}
      value = {formik.values.age}
      />

  <input
      id="weight"
      name="weight"
      type="text"
      placeholder="weight"
      onChange={formik.handleChange}
      value = {formik.values.weight}
      />

  <input
      id="smoking"
      name="smoking"
      type="text"
      placeholder="smoking"
      onChange={formik.handleChange}
      value = {formik.values.smoking}
      />

  <input
      id="nationality"
      name="nationality"
      type="text"
      placeholder="nationality"
      onChange={formik.handleChange}
      value = {formik.values.nationality}
      />

    <input
      id="birth_type"
      name="birth_type"
      type="text"
      placeholder="birth_type"
      onChange={formik.handleChange}
      value = {formik.values.birth_type}
      />

    </div>
    <button type="submit">Submit</button>
  </form>
      </div>
    );
  }

  export default App;

赞(0）回复(0）举报 2022-11-05

我来回答

neo4j 无法在formik中使用fetch并将数据发布到api

1条答案

相关问题

热门标签

最新问答