¿Alguien me puede explicar porque la app no cambia correctamente el valor titulo
(variable en el State) cuando el usuario usa este input (onChange={(e) => setTitulo(e.target.value)}
?
Parece que esa línea no esta haciendo su función correctamente.
const [titulo, setTitulo] = useState();
<input
isRequired={true}
type="text"
className="editor_title"
defaultValue={titulo}
onChange={(e) => setTitulo(e.target.value)}
Cuando el usuario clicka el botón para enviar el nuevo título:
<button
onClick={changeTitulo}
className="submit_form"
type="submit"
>
Guardar
</button>
La app debe enviar el titulo
function changeTitulo(e) {
e.preventDefault();
API.put(`articulos/modificar/${parseInt(id_articulo)}`, { id: parseInt(id_articulo), titulo: titulo }).then(
(res) => {
console.log(res);
console.log(res.data);
},
axiosConfig
);
};
Sin embargo no lo cambia. He hecho (console.log)
en algunas partes del componente y tiene un comportamiento raro y no lo entiendo.
En otro post en StackOverflow he leído que es el event.preventDefault() el que esta produciendo este comportamiento inesperado, pero si no lo pongo, entonces la app se recarga automáticamente)
Código completo:
xport default function EditArticle() {
const navigate = useNavigate();
const { id_articulo } = useParams();
const [article, setArticle] = useState([]);
useEffect(() => getArticle());
const [contenido, setContenido] = useState();
const [titulo, setTitulo] = useState();
const getArticle = async () => {
const articleResponse = await fetch(
API... +
parseInt(id_articulo)
);
const data = await articleResponse.json();
setArticle(data);
setTitulo(data.titulo);
setContenido(data.contenido);
};
function changeTitulo(e) {
e.preventDefault();
console.log(titulo)
API.put(`articulos/modificar/${parseInt(id_articulo)}`, { id: parseInt(id_articulo), titulo: titulo }).then(
(res) => {
console.log(res);
console.log(res.data);
},
axiosConfig
);
};
function deleteArticle() {
if (window.confirm("¿Estás seguro que quieres borrar este artículo?")) {
API.delete(
`articulos/eliminar/${parseInt(id_articulo)}`
)
.then(() => console.log("articulo eliminado"))
.catch((err) => console.log(err));
alert("El artículo ha sido borrado. Ahora podrás crear uno nuevo");
// Go back to Index page:
navigate("/");
} else {
console.log("anulada operacion");
}
}
return (
<React.Fragment>
<form className="markdown-editor-post">
<label>
<input
isRequired={true}
type="text"
className="editor_title"
defaultValue={titulo}
onChange={(e) => setTitulo(e.target.value)}
/>
<button
onClick={changeTitulo}
className="submit_form"
type="submit"
>
Guardar
</button>
</label>
<h3 className="author_text">Autor: {article.autor}</h3>
<h3 className="author_text">Fecha: {article.fechaCreacion}</h3>
<h3 className="editor_subtitle"> ¿Qué quieres editar?</h3>
<div className="container_editor_text">
<textarea
isRequired={true}
type="textarea"
defaultValue={contenido}
onChange={(e) => setContenido(e.target.value)}
className="editor_textarea"
useRef="TheContentInput"
/>
<div className="container_mirror">
<MarkdownPreview
rehypePlugins={[rehypeHighlight]}
source={contenido}
/>
</div>
</div>
<button className="submit_form" type="submit" colorScheme="brand">
Guardar
</button>
</form>
</React.Fragment>
);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
undefined
? Envía el título incompleto?