react useContext setState不是一个函数

Question

我正在制作一个react应用程序，我需要在我的全局状态中保持一个名称数组，就像这个文件:

import React from "react";
import { useState } from "react";
const initialState = {
nameList: [],
test: 'hello'
}
export const Context = React.createContext()
const Data = ({ children }) => {
const [state, setState] = useState(initialState)
return(
<Context.Provider value={[state, setState]}>
{children}
</Context.Provider>
)
}
export default Data

然而，当我尝试设置"nameList"到另一个文件中的新值:

const [state, setState] = useContext(Context);
const [currName, setCurrName] = useState('');
const handleAddName = () => {
setState.nameList(prevState => [...prevState, currName])
}

我得到一个"setstate。namelist不是一个函数";错误，我找不到也不明白原因，任何帮助将不胜感激

Answer 1

你正在错误地更新状态，下面是如何在你的情况下做的:

const handleAddName = () => {
setState(prevState => ({
...prevState,
nameList: [...prevState.nameList, currName]
}))
}

这将确保状态被不可变地更新。

setState.nameList是错误的，因为setState是一个函数，而不是一个将神奇地拥有您的状态密钥的对象。