Question

const { Button } = require("@material-ui/core");
const { useState } = require("react");

const Test = () => {
  const [loading, setLoading] = useState(false);

  const [todos, setTodos] = useState([]);
  const [users, setUsers] = useState([]);

  const getTodos = async () => {
    setLoading(true);
    const res = await fetch("https://jsonplaceholder.typicode.com/todos");
    const resData = await res.json();
    setTodos(resData);
    setLoading(false);
  };
  const getUsers = async () => {
    setTodos([]);
    setLoading(true);
    console.log(loading)
    const res = await fetch("https://jsonplaceholder.typicode.com/users");
    const resData = await res.json();
    setUsers(resData);
    setLoading(false);
  };

  return (
    <div>
      <Button
        color="primary"
        variant="contained"
        disabled={loading}
        onClick={getTodos}
      >
        Get Todos
      </Button>
      <Button
        color="primary"
        variant="contained"
        disabled={loading}
        onClick={getUsers}
      >
        Get Users
      </Button>
      {todos.map((item) => (
        <div>{JSON.stringify(item)}</div>
      ))}
      {users.map((item) => (
        <div>{JSON.stringify(item)}</div>
      ))}
    </div>
  );
};

export default Test;

由于 setLoading 是异步的并且不返回任何承诺，有没有什么方法可以成功设置加载状态，然后最终获取数据而无需使用具有加载依赖性的 useEffect。我认为对加载状态使用 useEffect 会变得复杂，因为加载状态用于多个 api 调用。

Answer 1

或者你可以尝试这样实现。

import "./styles.css";

const { Button } = require("@material-ui/core");
const { useState } = require("react");

const Test = () => {
  const [loading, setLoading] = useState(false);

  const [todos, setTodos] = useState([]);
  const [users, setUsers] = useState([]);

  // const getTodos = async () => {
  //   setLoading(true);
  //   const res = await fetch("https://jsonplaceholder.typicode.com/todos");
  //   const resData = await res.json();
  //   setTodos(resData);
  //   setLoading(false);
  // };
  // const getUsers = async () => {
  //   setTodos([]);
  //   setLoading(true);
  //   console.log(loading);
  //   const res = await fetch("https://jsonplaceholder.typicode.com/users");
  //   const resData = await res.json();
  //   setUsers(resData);
  //   setLoading(false);
  // };

  const getTodos = () => {
    setLoading(true);

    const getTodosData = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/todos");
      const resData = await res.json();
      setTodos(resData);
      setLoading(false);
    };

    getTodosData();
  };

  const getUsers = () => {
    setTodos([]);
    setLoading(true);
    console.log(loading);

    const getUsersData = async () => {
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      const resData = await res.json();
      setUsers(resData);
      setLoading(false);
    };

    getUsersData();
  };

  return (
    <div>
      <Button
        color="primary"
        variant="contained"
        disabled={loading}
        onClick={getTodos}
      >
        Get Todos
      </Button>
      <Button
        color="primary"
        variant="contained"
        disabled={loading}
        onClick={getUsers}
      >
        Get Users
      </Button>
      {todos.map((item) => (
        <div>{JSON.stringify(item)}</div>
      ))}
      {users.map((item) => (
        <div>{JSON.stringify(item)}</div>
      ))}
    </div>
  );
};

export default Test;

成功设置状态后如何调用API？

1 个答案: