React Hooks如何获取远程数据

最新推荐文章于 2023-09-08 11:57:38 发布

wlqdbtx

最新推荐文章于 2023-09-08 11:57:38 发布

阅读量517

点赞数

分类专栏： react 文章标签： hooks react-hooks react-hooks fetch data

本文链接：https://blog.youkuaiyun.com/wlqdbtx/article/details/103624678

版权

本文介绍了如何使用React Hooks获取远程数据，通过在useEffect中调用fetch方法，并利用依赖列表避免不必要的重复请求。当查询条件变化时，通过更新useEffect的依赖来触发新的数据请求。最后展示了如何封装useDataApi Hook，使其更易于管理和复用。

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

让我们来看一个hooks展示数据的简单的例子

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState({
    list: []
  });
  return (
    <ul>
      {data.list.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}
export default App;

如果数据需要从远程获取的话，那么需要改造下代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({
    list: []
  });
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        '/api?query=react',
      );
      setData(result.data);
    };
    fetchData();
  // 注意这里加了'[]'
  }, []);

  return (
    <ul>
      {data.list.map(item => (
        <li ke