随着 React 19 的引入，您将如何实现对某些值更改的重新获取

Question

React 19 将引入一个“use”钩子，这将使我们能够避免所有带有状态设置的 useEffects，但是如果我们想在某些状态更改时重新获取相同的值，单击按钮怎么办？

例如

  const [joke, setJoke] = useState([]);
  const [loading, setLoading] = useState(true);
  const [shouldRefetch, setShouldRefetch]= useState(false)
  useEffect(() => {
    const fetchJoke = async () => {
      try {
        const res = await fetch('https://api.chucknorris.io/jokes/random');
        const data = await res.json();
        setJoke(data);
        setLoading(false);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };
    fetchJoke();
  }, [shouldRefetch]);

据我所知，这是一种愚蠢的重新获取方法，它仅用于演示，但我们可以单击按钮更改状态并触发重新获取

const JokeItem = () => {
  const joke = use(apiCall());
  return (
    <div className="bg-blue-50 shadow-md p-4 my-6 rounded-lg">
      <h2 className="text-xl font-bold">{joke.value}</h2>
    </div>
  );
};

这就是react 19给我们带来的，在这种情况下我们如何触发重新获取？

到目前为止，唯一想到的就是强制重新渲染，或者最初调用它并将其设置在 useState 中，然后创建一个执行重新获取的处理程序

Answer 1

使用

use

，你仍然需要管理承诺本身，可能是在状态中。

提供的

JokeItem

示例可能无法实现您想要的效果，因为每次承诺解析时，组件都会重新渲染，并且

apiCall()

将再次调用，这可能会给出 new 未解决的承诺。 IE。它将处于瀑布循环中。

一个比较有代表性的例子是这样的：

const JokeItem = () => {
  const [apiCallPromise, setApiCallPromise] = useState(apiCall());
  const joke = use(apiCallPromise);
  return (
    <div className="bg-blue-50 shadow-md p-4 my-6 rounded-lg">
      <h2 className="text-xl font-bold">{joke.value}</h2>
      <button onClick={() => setApiCallPromise(apiCall())}>Refresh</button>
    </div>
  );
};