如何确保 axios 调用在 useEffect 中设置状态？

Question

我正在尝试使用 axios 获取一些数据。 我有这样的物品状态：

const [subGroup, setSubGroup] = useState([])
const [items, setItems] = useContext(ItemsContext)

然后我使用这个项目状态，过滤一些项目，将它们存储在另一个数组状态中，然后渲染它们。

const getSubGroups = () => {
    console.log(items) // still empty array
    
        const [group] = items.filter(item => (
            item.name === match.params.group ? item.subgroups : null
        ))
        const subgroups = group.subgroups

        setSubGroup(subgroups)
    

}

useEffects（我只有第二个，但现在我想在刷新时更新项目的状态，所以这就是为什么有两个）：

useEffect(async () => {
    await axios.get('http://localhost:3001/Items')
        .then(res => setItems(res.data));
    console.log(items)
    getSubGroups()
    }, [])
useEffect(() => {
    getSubGroups()
},[match.params.group])

控制台日志返回一个空数组，我收到 'Cannot read property 'subgroups' of undefined 的错误。我尝试使用没有 async 和 await 关键字的方法。结果相同。如何确保 useEffect 获取数据然后继续渲染项目？任何帮助，将不胜感激。 注意：res.data 返回我正确需要的数组。

编辑：

如果我想访问更多嵌套数据怎么办？我看了你的例子，它恰好适用于这种情况，但如果是这种情况怎么办？我尝试遵循逻辑，但没有输出：

const [items, setItems] = useContext(ItemsContext)
//each item has nested array data
const data = useMemo(() => {
    const [subWithData] = items.filter(item => (
        item.name === match.params.group ? item.subgroups : null
    )).filter(item => (
        item.subgroups.map(sub => (
            sub.name === match.params.subGroup
        ))
    ))
    return subWithData?.data?? []


}, [match.params.group, match.params.subGroup, items])

我在哪里做错了？对不起，如果这个问题太蹩脚，但我是新人。

Answer 1

您可以使用useMemo 钩子来记忆结果，而不是在源/依赖项没有更改时重新计算：

const [items, setItems] = useContext(ItemsContext)

const subGroups = useMemo(() => {
  const [group] = items.filter(item => (
    item.name === match.params.group
  ))
  return group?.subgroups ?? []
}, [match.params.group, items])

useEffect(() => {
  axios.get('http://localhost:3001/Items')
    .then((res) => setItems(res.data))
}, [])

return <>
  <div>{  ... you can use subGroups here  ... }</div>
</>