Recientemente comencé a aprender react.js para hacer mi proyecto de último año usando la pila MERN durante esto. Enfrento este problema, es decir, tengo una matriz
let projectTech = ['js','node','react'];y quiero combinarlo con la matriz de tecnologías presente en el siguiente estado de uso, dígame cómo puedo hacerlo.
const [projectObj, setProjectObj] = useState({ title: '', type: '', link: '', technologies:[], role:'', description: '' }); Ya probé las siguientes combinaciones pero no funciona, después de console.log(projectObj.technologies) obtuve una matriz vacía.
setProjectObj({...projectObj,technologies: projectTech}); setProjectObj({...projectObj,technologies:[...projectTech]}); setProjectObj({...projectObj,technologies:[...projectObj.technologies,projectTech]});por favor ayúdame, ¿cómo puedo arreglar esto?
Puede intentar usar el prevState de la función setState.
setProjectObj((prevState) => ({...prevState, technologies: projectTech }))mira esto: https://codesandbox.io/s/nifty-browser-wmoseu?file=/src/App.js
No hay nada malo con ese código. Solo tiene que cambiar la forma en que console.log su resultado.
Dado que el estado de configuración es asíncrono, intente evitar el estado de registro después de configurarlo.
Agregue esto en su componente
const handleSetState = () => { setProjectObj({...projectObj,technologies: projectTech}); console.log(projectObj) //WRONG, will console.log previous data } const handleSetState2 = () => { const newObj = {...projectObj,technologies: projectTech} setProjectObj(newObj); console.log(newObj) //OK, but not actual state. } //BEST useEffect(() => { console.log(projectObj) //Console.log state }, [projectObj]) //But only if state changes