Tengo una lista, cuando hago clic en ella quiero una vista detallada y funciona la primera vez, pero cuando hago clic en una nueva fila en mi lista, mi componente de detalles no se actualiza. Soy nuevo en esto. Cómo actualizar cada vez que hago clic en un objeto de mi lista. Mi componente de detalle llamado código "UpdateSupp":
import { useState, useEffect } from "react"; const UpdateSupp = ({ onAdd, _AssNr, _SuppName, _TurnOver12M }) => { const [AssNr, setAssNr] = useState(""); const [SuppName, setSuppName] = useState(""); const [TurnOver12M, setTurnOver12M] = useState(""); useEffect(() => { const RunAtChange = async () => { setAssNr(_AssNr); setSuppName(_SuppName); setTurnOver12M(_TurnOver12M); console.log(`_AssNr = ${_AssNr}`); }; RunAtChange(); }, []); const onSubmitUppSupp = (e) => { e.preventDefault(); onAdd({ AssNr, SuppName, TurnOver12M }); }; return ( <form className="add-form" onSubmit={onSubmitUppSupp}> <div className="form-control"> <h2> <label>{SuppName}</label> </h2> </div> <div className="wrapper-detail"> <div className="form-control"> <label>Leverantör ID</label> <input type="text" value={AssNr} onChange={(e) => setAssNr(e.target.value)} /> </div> <div className="form-control"> <label>Över 12M</label> <input id="set12M" type="text" value={TurnOver12M} onChange={(e) => setTurnOver12M(e.target.value)} /> </div> </div> <input type="submit" value="Spara" className="btn btn-block" /> </form> ); };¿Qué estoy haciendo mal? ¿Hay algo más que useEffect para nosotros que se active en cada actualización?
Le está diciendo explícitamente a useEffect() que no se ejecute en cada actualización de componente con la matriz de dependencia vacía , []) .
No pase una matriz de dependencia para que el efecto se ejecute en cada actualización. Sin embargo, eso también sobrescribirá efectivamente siempre el estado con los accesorios.
Parece que solo desea usar los accesorios como los valores de estado inicial:
const [AssNr, setAssNr] = useState(_AssNr); const [SuppName, setSuppName] = useState(_SuppName); const [TurnOver12M, setTurnOver12M] = useState(_TurnOver12M); // No effects neededSin embargo, estos no se actualizarán si cambia los accesorios, por supuesto. Es poco probable que realmente quieras eso, pero si quisieras sobrescribir, digamos, todos los valores de estado cuando cualquiera de los accesorios cambia, entonces tendrías un efecto con todos los accesorios como dependencias:
useEffect(() => { // Reset all state when props change setAssNr(_AssNr); setSuppName(_SuppName); setTurnOver12M(_TurnOver12M); }, [_AssNr, _SuppName, _TurnOver12M]); Aparte, nunca usas setSuppName , por lo que tal vez quieras deshacerte de ese átomo de estado por completo y solo usar el accesorio.