useEffect无限循环异步

Question

  const [allCases, setAllCases] = useState([])
  const [myCases, setMyCases] = useState([])
  const [sharedCases, setSharedCases] = useState([])
  const [favoriteCases, setFavoriteCases] = useState([])


useEffect(()=> {
    getData(_id).then(res => {
      const favoriteIds = res.data.find(i => i._id === _id).cases.map(x => {
        return x._id
      })
      setAllCases(res.cases.map(x => {
        if (favoriteIds.includes(x._id)) {
          return { ...x, isfavorite: true }
        }
        return { ...x, isfavorite: false }
      }))
      allCases && setSharedCases(allCases.filter(x => x.creator._id !== user._id))
      allCases && setMyCases(allCases.filter(x => x.creator._id === user._id))
      allCases && setFavoriteCases(allCases.filter(x => x.isfavorite))
    })

  }, [])

您好，我遇到了无限循环问题。如果我包含方括号，则不会填充我过滤的案例。如果我添加另一个 useEffect，即使我没有更改 allCases，我也会运行进入无限循环。（想知道为什么）

我该如何解决这个异步问题？

Answer 1

绕过此问题的一种简单方法是使用局部变量而不是状态调用其他 useState setter。然后您可以使用相同的变量更新 allCases 状态，而不必绕过异步函数。

useEffect(()=> {
  getData(_id).then(res => {
    const favoriteIds = res.data.find(i => i._id === _id).cases.map(x => {
      return x._id
    })

    // Save it to a local variable so that we have the value immediately
    const newAllCases = res.cases.map(x => {
      if (favoriteIds.includes(x._id)) {
        return { ...x, isfavorite: true }
      }
      return { ...x, isfavorite: false }
    })

    // Use the local variable to update state
    setSharedCases(newAllCases.filter(x => x.creator._id !== user._id))
    setMyCases(newAllCases.filter(x => x.creator._id === user._id))
    setFavoriteCases(newAllCases.filter(x => x.isfavorite))

    // Set the state for allCases
    setAllCases(newAllCases)
  })
}, [])

Answer 2

allCases 在设置 sharedCases 和其他设置之前未设置 useEffect 中的

allCases。此外，在 useEffect 中使用 [] 它只会在加载组件时调用该函数。所以你的其他状态值不会被设置。

我建议使用单独的 useEffect 和 [allCases] 并在那里设置所有其他值。如下所示

useEffect(()=> {
    getData(_id).then(res => {
      const favoriteIds = res.data.find(i => i._id === _id).cases.map(x => {
        return x._id
      })
      setAllCases(res.cases.map(x => {
        if (favoriteIds.includes(x._id)) {
          return { ...x, isfavorite: true }
        }
        return { ...x, isfavorite: false }
      }))
    })
  }, [])

useEffect(() => {
      // do filter and set the state
}, ['allCases'])

useEffect无限循环异步

useEffect infinite loop asynchronous

javascript

asynchronous

reactjs

react-hooks

use-effect