Empuje el objeto dentro de la matriz de preguntas en los datos, da este error TypeError no detectado: data.sections no es iterable en handleClick (SecondStep.tsx: 14: 1)
export default function CreateStepper() { const [data, setData] = useState({ name: "", desc: "", sections: [], }); console.log(data); return ( <><SecondStep data={data} setData={setData} /></>) } function SecondStep(data: any, setData: any) { const [addSection, setAddSection] = useState(1); const newSection = { sectionName: "Hdsd", sectionDesc: "dsdsd", question: [], }; const handleClick = () => { setData({ ...data, sections: [...data.sections, newSection] }); }; return ( <Box> </Box> ); } export default SecondStep;Cuando hice el siguiente código, devuelve "Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo 'push')" este tipo de error. Cómo enviar un nuevo objeto a la matriz en React useState. En primer lugar, useState es un objeto dentro del objeto, tiene preguntas: [] matriz cómo insertar el objeto en esta matriz
const [data, setData] = useState({ name: "", desc: "", sections: [], }); const newSection = { sectionName: "Hello", sectionDesc: "Desc", question: [], }; const handleClick = () => { let copyData = data; copyData.sections.push(newSection); setData(copyData); };Puede obtener la última versión del estado en el Método setState, donde luego puede agregar su objeto.
const [data, setData] = useState({ name: "", desc: "", sections: [], }); const newSection = { sectionName: "Hello", sectionDesc: "Desc", question: [], }; const handleClick = () => { setData(data => ({ ...data, sections: [...data.sections, newSection] }) }; Pero en realidad no estoy muy seguro de si necesita los ...data , es posible que pueda omitirlos.
Tienes que clonar el objeto y luego insertar los elementos en la matriz,
aquí está el ejemplo a continuación,
import "./styles.css"; import React, {useState} from 'react' export default function App() { const [data, setData] = useState({ name: "", desc: "", sections: [], }); const newSection = { sectionName: "Hello", sectionDesc: "Desc", question: [], }; const handleClick = () => { setData({...data, sections:[...data.sections, newSection]}); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <button onClick={handleClick}>Click</button> <h4>Sections: {data.sections[0]?.sectionName}</h4> </div> ); }Zona de pruebas de código: https://codesandbox.io/s/react-do7bk?file=/src/App.js:0-572
La respuesta a su problema actualizado es:
import "./styles.css"; import React, { useState } from "react"; export const CreateStepper = () => { const [data, setData] = useState({ name: "", desc: "", sections: [] }); const SecondStep = (data: any) => { const [addSection, setAddSection] = useState(1); const newSection = { sectionName: "Hdsd", sectionDesc: "dsdsd", question: [] }; const handleClick = () => { setData({ ...data, sections: [...data.sections, newSection] }); }; return <></>; }; return ( <> <SecondStep data={data} /> </> ); }; export default CreateStepper;También puede proporcionar a SecondStep la función a través de Props si prefiere que esto funcione para:
export default function CreateStepper() { const [data, setData] = useState({ name: "", desc: "", sections: [], }); console.log(data); return ( <><SecondStep data={data} setData={setData} /></>) } function SecondStep(data: any, setData: (data : any) => void) { const [addSection, setAddSection] = useState(1); const newSection = { sectionName: "Hdsd", sectionDesc: "dsdsd", question: [], }; const handleClick = () => { props.setData({ ...data, sections: [...data.sections, newSection] }); }; return ( <Box> </Box> ); } export default SecondStep;