我如何使用 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