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])

控制台日志返回一个空数组，我收到'无法读取未定义的属性'子组'的错误。我尝试使用没有 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

与其在 return 语句中移动繁重的（尽管在当前情况下它并不繁重）计算，您可以使用 useMemo 钩子来记忆结果，如果源/依赖项没有，则不重新计算t改变了：

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>
</>

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

1 个答案: