使用空依赖数组时在 useEffect 中反应陈旧状态

时间:2021-01-15 09:54:44

标签: javascript reactjs react-hooks use-effect

我正在尝试在 useEffect 钩子中修改状态后读取状态。然而,由于 useEffect 关闭可用性为空数组,它根本没有更新导致无限循环。 我故意使用空的依赖数组,因为我希望这仅在之后发生 第一次渲染,因此不能选择将可用性作为依赖项。

我需要某种方式从可用性中读取最新值,但我不知道如何去做。

  const [ availability, setAvailability ] = useState([])

  const updateAvailability = (data, manufacturer) => {
    setAvailability(availability => {
      const copy = {...availability}
      copy[manufacturer] = data
      return copy
    })
  }

  const parseAvailability = products => { 
    products.forEach(product => {
      if (!availability[product.manufacturer]) { // availability is stale after updates
        updateAvailability({}, product.manufacturer) // notify that data is coming soon
        service.getAvailability(product.manufacturer).then(data => { // http request to fetch availability 
          updateAvailability(data, product.manufacturer)
        })
      }
    })
   }

  useEffect(() => {
    config.categories.forEach(category => {
      service.getCategory(category.name).then(data => {
        parseAvailability(data, availRef)
      })
    })
  },[])

0 个答案:

没有答案