0
118
ViewsReaccionar - clients.map no es una función
Mi problema es: cuando trato de cambiar las entradas, arroja clientes. El mapa no es una función. Me gustaría cambiar el valor y actualizar los datos en la base de datos.
//hook for fetching const [customers, setCustomers] = useState([]); //fetching data from db by id useEffect(() => { Axios.get(`http://localhost:3001/profile/${id}`) .then((response) => { if (response) { setCustomers(response.data); } else { alert('Error') } }) }, [])Y así es como trato de mapear, de lo contrario, parece que el método onChange causa el problema.
{customers.map(customer => <div key={customer.id}> <div className="containerProfile"> <div className="leftInputProfile"> <p>Full Name</p> <input type="text" name='Fullname' placeholder={!customer.Fullname && "Adja meg az adatot"} onChange={(e) => { setCustomers({ ...customers, [e.target.name]: e.target.value }); }} /> </div> </div> </div> Sé que el método .map() tiene que obtener una matriz, pero no conozco la solución aquí :(
respuesta.datos:
2 answers
Answer question0
Creo que su problema está en su evento onChange , está configurando a sus clientes en un objeto {} que no tiene la función .map llamando
setCustomers({ ...customers, [e.target.name]: e.target.value });Tienes que llamarlo con corchetes [] en lugar de llaves {}:
setCustomers([ ...customers, yourNewCustomer ]);0
Estás configurando el estado para que se convierta en un objeto:
setCustomers({ ...customers, [e.target.name]: e.target.value });Si desea actualizar un cliente específico, puede escribir un controlador separado como:
const updateCustomer = (customerId) => (event) => { const index = customers.findIndex((customer) => customer.id === customerId); const nextCustomers = customers.splice(index, 1, { ...customers[index], [event.target.name]: event.target.value, }); setCustomers(nextCustomers); }Debe encontrar el objeto para actualizarlo, actualizarlo y reemplazarlo en el estado actual.
Su entrada debe tener al menos <input name='Fullname' onChange={updateCustomer(customer.id)} value={customer.Fullname} />
También debe asignar la propiedad de value , ya que lo está convirtiendo en un componente controlado con su elemento de entrada.