React 19：如何通过onClick事件结合use API重新获取数据？

要通过onClick触发重新获取数据，核心是让use API接收到新的Promise实例——因为use会根据Promise的引用变化来决定是否重新发起请求。以下是具体实现方案：

实现步骤 #

1. 在父组件中添加一个用于触发刷新的状态，驱动组件重新渲染/挂载。
2. 点击按钮时更新该状态，让JokeItem生成新的fetchData() Promise实例。
3. 借助key属性或状态传递，确保use能获取到新的Promise，进而重新请求数据。

修改后的完整代码 #

import { use, Suspense, useState } from 'react'

const fetchData = async () => {
  const res = await fetch('https://api.chucknorris.io/jokes/random')
  return res.json()
}

const JokeItem = () => {
  const joke = use(fetchData())
  return <h2>{joke.value}</h2>
}

export default function Joke() {
  const [refreshKey, setRefreshKey] = useState(0)
 
  return (
    <Suspense fallback={<div>加载中...</div>}>
      {/* 通过key变化强制重新挂载JokeItem，生成新Promise */}
      <JokeItem key={refreshKey} /> 
      <button onClick={() => setRefreshKey(prev => prev + 1)}>获取新笑话</button>
    </Suspense>
  ) 
}

原理说明 #

• 点击按钮时，refreshKey自增，导致JokeItem的key属性变化。React会卸载旧组件实例，重新挂载新实例。
• 新的JokeItem实例会调用fetchData()生成全新的Promise，use API检测到新Promise后，会重新发起请求并等待结果，最终渲染新的笑话内容。

如果不想通过key强制重新挂载，也可以将refreshKey作为props传递给JokeItem，组件重新渲染时fetchData()会自动生成新Promise，use同样会重新处理请求：

// 子组件修改
const JokeItem = ({ refreshKey }) => {
  const joke = use(fetchData())
  return <h2>{joke.value}</h2>
}

// 父组件中传递props
<JokeItem refreshKey={refreshKey} />

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