有没有更有效的方法来使用 axios 从 API 中获取数据？ (React.js & node.Js)

Question

在这个实现中，代码运行并实现了我想要做的目的——使用 axios 获取https://jsonplaceholder.typicode.com 的虚拟 API，然后将其显示在屏幕上。但是，我觉得我的代码可以重构以提高效率。目前，我有四个 useState 常量（对象中的每个属性一个），它们在获取时设置/更新。我试图将 CurrentFetch CurrentFetch2 CurrentFetch3 CurrentFetch4 常量合并到一个 useState({})object 中，但是 React 给了我在这里使用对象的错误。有什么想法吗？

这是我的代码：

import React, { useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [fetchCount, setFetchCount] = useState(1);
  const [currentFetch, setCurrentFetch] = useState([]);
  const [currentFetch2, setCurrentFetch2] = useState([]);
  const [currentFetch3, setCurrentFetch3] = useState([]);
  const [currentFetch4, setCurrentFetch4] = useState([]);


  const HandleFetchApi = async () => {
    axios
      .get(`https://jsonplaceholder.typicode.com/todos/${fetchCount}`)
      .then((response) => {
        let data = response.data;
        setCurrentFetch(data.userId);
        setCurrentFetch2(data.id);
        setCurrentFetch3(data.title);
        setCurrentFetch4(data.completed);
        setFetchCount(fetchCount + 1);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <div className="App">
      <h1>Testing API Fetch from Dummy Api</h1>
      <button onClick={HandleFetchApi}>
        Click to fetch record #{fetchCount}
      </button>
      <h2>user id: {currentFetch}</h2>
      <h2>id: {currentFetch2}</h2>
      <h2>title: {currentFetch3}</h2>
      <h2>completed: {currentFetch4.toString()}</h2>
      <br />

      <h5>from: https://jsonplaceholder.typicode.com/</h5>
    </div>
  );
}

export default App;

Answer 1

更好的版本：

import React, { useState } from "react";
import "./App.css";
import axios from "axios";

function App() {
  const [fetchCount, setFetchCount] = useState(1);
  const [currentFetch, setCurrentFetch] = useState({
    userId: '',
    id: '',
    title: '',
    completed: ''
  });


  const HandleFetchApi = async () => {
    axios
      .get(`https://jsonplaceholder.typicode.com/todos/${fetchCount}`)
      .then((response) => {
        const { userId, id, title, completed } = response.data;
        setCurrentFetch({...currentFetch, ...{userId, id, title, completed}});
        setFetchCount(fetchCount + 1);
      })
      .catch((error) => {
        console.log(error);
      });
  };
  return (
    <div className="App">
      <h1>Testing API Fetch from Dummy Api</h1>
      <button onClick={HandleFetchApi}>
        Click to fetch record #{fetchCount}
      </button>
      <h2>user id: {currentFetch.userId}</h2>
      <h2>id: {currentFetch.id}</h2>
      <h2>title: {currentFetch.title}</h2>
      <h2>completed: {currentFetch.completed.toString()}</h2>
      <br />

      <h5>from: https://jsonplaceholder.typicode.com/</h5>
    </div>
  );
}

export default App;

快乐编码:)