react setState更新后的数据怎么取

最新推荐文章于 2025-06-03 23:33:17 发布

原创最新推荐文章于 2025-06-03 23:33:17 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍在React中如何利用setState实现数据更新，并通过useEffect和ref来确保能够及时获取到更新后的状态数据。文章提供了具体的代码示例，帮助读者理解如何在组件中正确使用这些Hook。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setState是异步更新。若想及时的拿到更新后的数据。这里提供两种方法
可以通过useEffect获取：

function ProductPage({ productId }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // 把这个函数移动到 effect 内部后，我们可以清楚地看到它用到的值。
    async function fetchProduct() {
      const response = await fetch('http://myapi/product/' + productId);
      const json = await response.json();
      setProduct(json);
    }

    fetchProduct();
  }, [productId]); // ✅ 有效，因为我们的 effect 只用到了 productId
  // ...
}

也可以通过ref获取，如下：

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);
  return <h1>Now: {count}, before: {prevCount}</h1>;
}

function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
}