Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

156
Vistas
React Hook Form Validation Problem with Filled Form with Fetched Values

For my react app, I need a 'Update Article' component. I am initially filling the form with fetching the values from the existing article in backend. But when I click Submit button without changing anything It's still returning errors. What could be the problem? This is the code:

  const [articleTitle, setArticleTitle] = useState("");
..otherStates
  const [getArticleRes, getArticleReq] = useApi();

  const {
    register,
    handleSubmit,
    formState: { errors, }
  } = useForm();

  useEffect(() => {
    getArticleReq(urls.articlesUrl + "/" + articleId, { method: "GET" });
  }, []);

  useEffect(() => {
    if (getArticleRes.status) {
      if (getArticleRes.status === 200) {
        const { title, body, imguri } = getArticleRes.data.result;
        setArticleTitle(title);
        setArticleBody(body);
        setImageData(imguri);
      } else if (getArticleRes.status === 400) {
        console.log("SIKINTI BÜYÜK");
      } else {
      }
    }
  }, [getArticleRes.data, getArticleRes.status]);

//Updating the article here. Totatlly works but needed to delete for the code limitation

  return (
    <div>
      <form onSubmit={handleSubmit(editArticle)}>
        <TextField
          sx={{ width: "100%" }}
          margin="normal"
          id="articleTitle"
          name="articleTitle"
          label="Title"
          variant="outlined"
          value={articleTitle}
          {...register("articleTitle", {
            required: true,
            minLength: 8,
            onChange: (e) => setArticleTitle(e.target.value),
          })}
        />
        { errors.articleTitle && errors.articleTitle.type === "required" && (
          <span className={classes.errorMessage}>Title is Required</span>
        )}
        { errors.articleTitle && errors.articleTitle.type === "minLength" && (
          <span className={classes.errorMessage}>
            Minimum characters 8 required
          </span>
        )}
...and other textfields
        <Button
          type="submit"
          variant="contained"
        >
          Submit Article
        </Button>
      </form>
    </div> ```
[This is the situation when I try to submit with changing anything with the existing fetched data][1]


  [1]: https://i.stack.imgur.com/j0U8h.png
about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda