Entonces, básicamente, mi problema es que tengo dos páginas/pantallas (Principal y Editar). En la página Main , cuando hago clic en un elemento, lo pasa a la página Edit usando ganchos useHistory del paquete react-router-dom . En la página Edit , obtengo el elemento usando ganchos useLocation y los paso al campo de entrada para mi useState inicial, pero cada vez que edito/escribo un carácter en text field no estoy seguro de si se llama re render o cualquier otra cosa, pero se pasará useLocation en consola Aquí está mi código:

Editar página/pantalla

 import axios from "axios"; import React, { useState } from "react"; import { useLocation } from "react-router"; export const EditScreen = () => { const location = useLocation().state; console.log(location); const [title, setTitle] = useState(location.b_title); const [content, setContent] = useState(location.b_content); const [category, setCategory] = useState(location.category_id); const submitHandler = (e) => { e.preventDefault(); axios .put(`http://localhost:3001/api/v1/blog/${location.id}`, { blog_title: title, blog_content: content, category_id: category, }) .then(alert("success edit blog")) .catch((err) => alert(err)); setTitle(""); setContent(""); setCategory(""); }; return ( <div> <h1>edit blog page</h1> <form onSubmit={submitHandler}> <input type="text" placeholder="title" value={title} onChange={(e) => setTitle(e.target.value)} /> <br /> <br /> <input type="text" placeholder="content" value={content} onChange={(e) => setContent(e.target.value)} /> <br /> <br /> <input type="text" placeholder="category" value={category} onChange={(e) => setCategory(e.target.value)} /> <br /> <br /> <input type="submit" value="submit" disabled={ title === "" || content === "" || category === "" ? true : false } /> </form> </div> ); };

Captura de pantalla de la consola

Puedes ver arriba ss en círculo rojo, ese es el problema.