ReactJS中如何将fetch请求逻辑封装为独立helper函数在组件内调用

• getLotteries是异步函数，调用后会返回Promise实例，你没有用await或者.then()处理异步结果，代码里直接使用的response属于未声明变量，本身就会抛出引用错误。
• 你把修改状态的逻辑写在了同步执行的位置，会在接口请求还没返回结果的时候就提前执行setIsLoading(false)和setLotteries，和你原本的执行逻辑完全不符。
• useEffect的回调函数不能直接声明为async，所以你需要在useEffect内部定义异步执行函数，再调用它。

import { getLotteries } from '你的helper文件路径' // 记得替换为你实际的helper文件引入路径

export const Carousel = () => {
  const [ lotteries, setLotteries ] = useState({});
  const [ isLoading, setIsLoading ] = useState(true);

  useEffect(() => {
    // 内部定义异步执行函数
    async function fetchData() {
      const res = await getLotteries() // 等待异步请求返回结果
      setLotteries(res)
      setIsLoading(false)
    }
    fetchData()
  }, [])

  // 渲染逻辑和原有保持一致即可
  return (
    <>
      {
        isLoading ? (
          <span>loading</span>
        ) : (
          <Slider >
            {
              Object.keys(lotteries).map((lottery, idx) => {
                return (
                  <Slide 
                    key={ idx }
                    title={ lottery }
                    prize={ lotteries[lottery].next.jackpot }
                    day={ lotteries[lottery].next.date.day }
                  />
                )
              })
            }
          </Slider>
        )
      }
    </>
  );
}

可以给请求加异常捕获，避免接口报错导致页面直接崩溃：

useEffect(() => {
  async function fetchData() {
    try {
      const res = await getLotteries()
      setLotteries(res)
    } catch (err) {
      console.error('请求抽奖数据失败：', err)
      // 可自行扩展错误状态的展示逻辑，比如展示错误提示文案
    } finally {
      // 无论请求成功失败都关闭loading
      setIsLoading(false)
    }
  }
  fetchData()
}, [])

内容的提问来源于stack exchange，提问作者Serralvaro