useEffect бесконечный l oop асинхронный

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

  }, [])

Здравствуйте, у меня проблемы с бесконечным l oop. Если я включу скобки, мои отфильтрованные случаи не заполняются. Если я добавлю еще один useEffect, я столкнусь с бесконечным l oop, хотя я не изменяю все случаи. (интересно почему)

Как я могу решить эту асинхронную проблему?

Answer 1

allCases внутри useEffect не установлено, пока вы не настроите sharedCases и другие. Кроме того, с [] в 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'])

Answer 2

Один простой способ обойти эту проблему - вызвать другие сеттеры useState с локальной переменной вместо состояния. Затем вы можете обновить состояние allCases с помощью той же переменной, и вам не придется обходить функции asyn c.

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)
  })
}, [])