面试题：React中如何使用Hooks集成Axios第三方库进行数据请求

关键代码片段：

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

const UserList = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      try {
        const response = await axios.get('/api/users');
        setUsers(response.data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, []);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

useEffect依赖数组的作用及设置：
- 作用：依赖数组决定了useEffect钩子函数在什么情况下触发。当依赖数组中的任何值发生变化时，useEffect内部的函数（副作用函数）会重新执行。如果依赖数组为空[]，则useEffect只会在组件挂载（首次渲染）和卸载时执行，这通常用于只需要执行一次的副作用操作，如数据获取、订阅等。
- 正确设置：
  - 空数组：如上述代码中的useEffect，如果我们希望只在组件挂载时获取一次用户列表数据，就将依赖数组设置为空[]。这样可以避免在组件更新（如状态或属性变化）时不必要的数据重复获取。
  - 特定依赖：如果数据获取操作依赖于某个状态或属性，就需要将这些依赖放入依赖数组。例如，如果有一个搜索输入框，根据输入内容获取不同的用户列表，代码可能如下：
```
import React, { useState, useEffect } from'react';
import axios from 'axios';

const UserList = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      setLoading(true);
      try {
        const response = await axios.get(`/api/users?search=${searchTerm}`);
        setUsers(response.data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };
    fetchUsers();
  }, [searchTerm]);

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error}</div>;
  }

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search users"
      />
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;
```
    在这个例子中，useEffect的依赖数组为[searchTerm]，表示每当searchTerm状态变化时，都会重新执行useEffect中的数据获取逻辑。这样就能根据不同的搜索词获取相应的用户列表。
  - 不设置依赖数组：不推荐不设置依赖数组，因为这样会导致useEffect在每次组件渲染（包括首次渲染和后续更新）时都执行，可能会引发性能问题和不必要的副作用重复执行。

星途面试题库

面试题：React中如何使用Hooks集成Axios第三方库进行数据请求

知识考点

面试题答案