为什么我的React hook变量没有保留我设置的state状态值？

你遇到的是React Hook闭包捕获旧值的典型场景：
你的useEffect依赖数组仅包含props.employees，组件首次渲染时effect会捕获当时的teamsArr值（也就是初始值[]），后续每次props.employees更新触发effect执行时，用的都是这个被捕获的初始空数组来拼接新值，自然无法保留历史数据。

推荐使用setState的函数式更新语法，这种写法可以直接拿到state的最新值，不需要把teamsArr加入依赖数组，也不会出现闭包捕获旧值的问题：

const Employees = (props) => {
  const [teamsArr, setTeamsArr] = useState([])

  useEffect(() => {
    // 函数式更新的参数prev为teamsArr的最新值
    setTeamsArr(prev => [...prev, props.employees])
  },[props.employees])
  // 其余组件逻辑
}

补充说明：如果你的需求是把props.employees数组内的每个元素逐一追加到teamsArr，而非把整个props.employees作为单个数组项追加，只需要把更新逻辑改成：
setTeamsArr(prev => [...prev, ...props.employees])

你也可以选择把teamsArr加入依赖数组实现同样效果，但该写法会导致每次teamsArr更新时额外触发一次effect执行，效率低于函数式更新方案，仅作参考：

useEffect(() => {
  const updatedTeamsArr = [...teamsArr, props.employees]
  setTeamsArr(updatedTeamsArr)
},[props.employees, teamsArr])

内容的提问来源于stack exchange，提问作者Teinovic