时间戳

首页 > 解决方案 > 为什么在 useEffect 中使用空数组不起作用 - React？

reactjs - 为什么在 useEffect 中使用空数组不起作用 - React？

问题描述

我正在使用 useEffect 通过 Axios 获取数据，因为我希望它只在初始渲染时触发，所以我传递了一个空数组作为第二个参数......

useEffect(() => {
  const fetchData = async () => {
    const { data } = await axios.get("https://fakestoreapi.com/products")
    const products = data
    setData(products)
    setLoading(false)
    setSortType('')
  }
  fetchData()
}, [])

现在我正在使用另一个 useEffect 对我获取的数据进行排序......

useEffect(() => {
  if (sortType == "price") {
    return setData([...data].sort((a, b) => a[sortType] - b[sortType]))
  }
  if (sortType == "title") {
    return setData([...data].sort((a, b) => {
      if (a.title.toLowerCase() < b.title.toLowerCase()) return -1
      if (a.title.toLowerCase() > b.title.toLowerCase()) return 1
      return 0
    }))
  }
}, [sortType])

一切正常，但问题是每当我尝试对项目进行排序时，第二个 useEffect 会触发，然后是第一个 useEffect，这会导致组件重新获取项目。有没有其他方法可以让我只在初始渲染上运行一个函数，或者我做错了什么？

标签： reactjsaxiosreact-hooks

解决方案

推荐阅读