我如何使用 state 更新数组 object 的值

Question

我最近开始学习 react.js 以使用 MERN 堆栈制作我的最后一年项目，在此期间我面临这个问题，即我有一个数组

let projectTech = ['js','node','react'];

我想将它与以下 useState 中存在的技术数组结合起来，请告诉我该怎么做。

const [projectObj, setProjectObj] = useState({                 
        title: '',
        type: '',
        link: '',
        technologies:[],
        role:'',
        description: ''
    });

我已经尝试了以下组合，但它不起作用，在console.log(projectObj.technologies)之后我得到了空数组。

setProjectObj({...projectObj,technologies: projectTech});
setProjectObj({...projectObj,technologies:[...projectTech]});
setProjectObj({...projectObj,technologies:[...projectObj.technologies,projectTech]});

请帮助我，我该如何解决这个问题？

Answer 1

您可以尝试使用 setState function 的 prevState。

setProjectObj((prevState) => ({...prevState, technologies: projectTech }))

看看这个： https://codesandbox.io/s/nifty-browser-wmoseu?file=/src/App.js

Answer 2

该代码没有任何问题。 你只需要改变你控制台的方式。记录你的结果。

由于设置state是异步的，设置后尽量避免记录state。

将此添加到您的组件中

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