import React, { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; const RestaurantUpdate = () => { const [state, setState] = useState({ name: '', email: '', address: '', rating: '' }) const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [address, setAddress] = useState(""); const [rating, setRating] = useState(""); const { id } = useParams(); useEffect(() => { fetch('http://localhost:3000/restaurant/' + id).then((response) => { response.json().then((result) => { console.warn(result.name); setName(result.name); setEmail(result.email); setAddress(result.address); setRating(result.rating); }) }) }, []); function update() { fetch("http://localhost:3000/restaurant/" + id, { method: "PUT", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(state) }).then((result) => { result.json().then((resp) => { alert("Restaurant has been updated"); }) }) } return ( <div> <h1>Update</h1> <div> <input onChange={(event) => setName(event.target.value)} placeholder="Restaurant Name" value={name} /> <br /><br /> <input onChange={(event) => setEmail(event.target.value)} placeholder="Restaurant Email" value={email} /> <br /><br /> <input onChange={(event) => setRating(event.target.value)} placeholder="Restaurant Rating" value={rating} /> <br /><br /> <input onChange={(event) => setAddress(event.target.value)} placeholder="Restaurant Address" value={address} /> <br /><br /> <button onClick={() => { update() }}>Update Restaurant</button> </div> </div> ); }; export default RestaurantUpdate;Quiero que mi API se actualice. Pero no está funcionando. Los atributos de esa identificación en particular se quedan en blanco. ¿Cómo actualizar todos los datos de esa identificación particular en componentes funcionales?
¿Tal vez tengo algún error de sintaxis o hay algún otro método alternativo?
Está actualizando las partes individuales del estado (nombre, correo electrónico, dirección, calificación), pero está enviando la parte grande del estado (estado) con su llamada a la API. Esta parte del estado nunca se actualiza en su componente. Siempre enviará sus valores predeterminados, que son cadenas vacías para cada propiedad.
Puede pasar las partes individuales del estado a la llamada a la API:
function update() { fetch("http://localhost:3000/restaurant/" + id, { method: "PUT", headers: { 'Content-Type': 'application/json' }, // use object property shorthand to avoid // syntax like { name: name, email: email ... } body: { name, email, address, rating } }).then((result) => { result.json().then((resp) => { alert("Restaurant has been updated"); }) }) }