useState 与数组给出奇怪的结果

Posted 2023-02-22

【中文标题】useState 与数组给出奇怪的结果

【英文标题】：useState with array giving odd results

【发布时间】：2021-12-30 06:02:42

【问题描述】：

我在使用数组时遇到了反应 useState 的问题， 这是我的teamMembers 状态声明：

const [teamMembers, setTeam] = useState();

...我正在填写表格，点击按钮更新teamMembers 状态。以下代码在处理程序中：

let newTeam = teamMembers || ['Tony Stark'];

console.log(newTeam);    // here it is giving me Tony Stark
setTeam(newTeam);

我使用useEffect查看更新：

useEffect(() => 
    console.log(teamMembers);     // here it is giving me empty array([])
)

我错过了什么？

【参考方案1】：

应该先设置为空数组：

const [teamMembers, setTeam] = useState([])

然后：

useEffect(() => 
   console.log(teamMembers)
, [teamMembers])

如果数组发生变化，useEffect 将记录一个空数组。

认为你正在尝试做：

const [teamMembers, setTeam] = useState([])

setTeam([...teamMembers, 'Tony stark'])

useEffect(() => 
   console.log(teamMembers)
, [teamMembers])

【参考方案2】：

在第三个块中的更正可能会起作用：

useEffect(() => 
   console.log(teamMembers);     // here it is giving me empty array([])
,[teamMembers]);