Digamos que tengo un componente principal que representa varios componentes secundarios en función de una matriz utilizando el método .map(). El uso de algunos componentes secundarios de entrada crea un objeto que devuelve con una función de devolución de llamada en la actualización del estado.
const InputRows = () => { const [incomeObj, setIncomeObj] = useState({}); const fruits= ['apple' , 'orange', 'banana', 'pineapple']; return ( fruits.map((fruit, index)=> <tr key={index}> <InputRow fruit={fruit} number={index} setIncomeObj={setIncomeObj}/> </tr> )Lo que debo hacer ahora es almacenar los objetos devueltos de todos los componentes secundarios dentro de un objeto para luego enviarlo como JSON.
He intentado varias formas de hacerlo, por ejemplo, algo como usar useEffect hook:
let combinedIncomeObj = {}; useEffect(() => { Object.assign(combinedIncomeObj, incomeObj); console.log(combinedIncomeObj); }, [incomeObj]);Pero, por supuesto, solo reemplaza los datos existentes en combineIncomeObj en cada actualización de estado, sin agregarlos. ¿Usar administradores estatales como Redux es la única forma de lograr mi objetivo? ¿O simplemente me estoy perdiendo algo?
Actualización: me di por vencido y decidí construir mi objeto JSON a partir de los datos de entrada al enviarlo, mucho más fácil y tiene más sentido.
Envíe los datos como una matriz de objetos como este [{ } , { } ] Simplemente siga el siguiente código
const InputRows = () => { const [incomeObj, setIncomeObj] = useState([]); const fruits= ['apple' , 'orange', 'banana', 'pineapple']; const handleIncomeObj = (obj)=>{ setIncomeObj([...incomeObj,{...obj} ]); } return ( fruits.map((fruit, index)=> <tr key={index}> <InputRow fruit={fruit} number={index} setIncomeObj={obj=>hanleIncomeObj(obj)}/> </tr> )Espero que le sea útil .
si desea agregar al objeto, puede usar la sintaxis extendida
let combinedIncomeObj = {}; useEffect(() => { combinedIncomeObj = {...combinedIncomeObj, incomeObj} console.log(combinedIncomeObj); }, [incomeObj]);