useEffect 无限循环异步答案

【问题标题】：useEffect infinite loop asynchronoususeEffect 无限循环异步
【发布时间】：2020-05-11 01:20:13
【问题描述】：

  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，我也会遇到无限循环。（想知道为什么）

如何解决这个异步问题？

【问题讨论】：

allCases 不会及时更新，以便您使用该效果调用中的值。您必须使用第二个useEffect。至于为什么第二个导致无限循环，我不能说没有看到尝试。您是否将数组引用用作依赖项？ }, [allCases])?

标签： javascript reactjs asynchronous react-hooks use-effect

【解决方案1】：

绕过此问题的一种简单方法是使用局部变量而不是状态调用您的其他 useState 设置器。然后您可以使用相同的变量更新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)
  })
}, [])

【讨论】：

谢谢！我不得不通过添加另一个 useEffect 并引用 allCases 来进行一些编辑。
useEffect(()=> { setAllCases(newAllCases) }) }, []) useEffect(()=> { setSharedCases(allCases.filter(x => x.creator._id !== props.user._id)) setMyCases(allCases.filter(x => x.creator._id === props.user._id)) setFavoriteCases(allCases.filter(x => x.isfavorite)) }, [allCases] )

【解决方案2】：

在您设置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'])

【讨论】：