javascript - 在 useEffect 或事件处理程序中直接在 react 中从 api 获取数据

Question

应该如何在 react 钩子(Hook)中执行提取？在这两个代码片段中，哪一个被称为执行提取的最佳实践或最佳 react 模式？

本示例使用 useEffect 执行 fetch 操作。

import React, { useState, useEffect } from "react";

export default function App() {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  useEffect(() => {
    if (!loading) return;
    const fetchData = async () => {
      const response = await fetch(
        `https://api.github.com/search/repositories?q=${query}`
      );
      const data = await response.json();
      setData(data.items);
      setLoading(false);
    };
    fetchData();
  }, [loading, query]);

  const onSubmit = e => {
    e.preventDefault();
    setLoading(true);
  };

  return (
    <div className="App">
      <h1>Search Github Repo.</h1>
      <h3>Implementation One</h3>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={query}
          onChange={e => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      {loading && <div>Loading...</div>}
      {!loading &&
        data.map(repo => (
          <div key={repo.id}>
            <h4>{repo.name}</h4>
            <p>{repo.description}</p>
          </div>
        ))}
    </div>
  );
}

此示例使用 onClick 事件处理程序来执行 fetch 操作。

import React, { useState } from "react";

export default function App() {
  const [query, setQuery] = useState("");
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState([]);

  const onSubmit = e => {
    e.preventDefault();
    setLoading(true);
    const fetchData = async () => {
      const response = await fetch(
        `https://api.github.com/search/repositories?q=${query}`
      );
      const data = await response.json();
      setData(data.items);
      setLoading(false);
    };
    fetchData();
  };

  return (
    <div className="App">
      <h1>Search Github Repo.</h1>
      <h3>Implementation Two</h3>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          value={query}
          onChange={e => setQuery(e.target.value)}
        />
        <button type="submit">Search</button>
      </form>
      {loading && <div>Loading...</div>}
      {!loading &&
        data.map(repo => (
          <div key={repo.id}>
            <h4>{repo.name}</h4>
            <p>{repo.description}</p>
          </div>
        ))}
    </div>
  );
}

codesandbox 中的运行示例

Answer 1

应该采用哪种方法取决于您的用例

在useEffect中获取数据在以下场景中很有用

• 在初始渲染等生命周期中获取数据
• 在某些 prop 更改时获取数据
• 按时间间隔获取数据但设置订阅或setInterval

在处理程序中获取数据在以下场景中很有用

• 基于用户交互，例如搜索按钮点击、搜索输入更改

由于您的案例基于使用交互，因此在处理程序中实际调用 API 而不是 useEffect Hook