Question

我正在获取具有useEffect的API，并且API响应正确，如

{response: {message: "This is a image link", status: "success"}, error: null}

第二次，当我收到下一个API调用响应时，如果出现错误，则旧的响应不会删除。像这样显示

{response: {message: "This is a image link", status: "success"}, error: TypeError}

我使用this教程代码来获取API

在codesandbox中查看我的确切代码

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

const useFetch = (url, options) => {
  console.log("useFetch");
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(() => {
    const FetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
        // console.log("json - ", json);
      } catch (error) {
        // console.log("error - ", error);
        setError(error);
      }
    };
    FetchData();
  }, [url]);
  return { response, error };
};

function App() {
  const API_URL = `https://dog.ceo/api/breeds/image/random`;
  const [apiUrl, setApiUrl] = useState(API_URL);
  const res = useFetch(apiUrl, {});
  console.log("res - ", res);
  if (!res.response) {
    return <div>Loading...</div>;
  }

  const apiCallAgain = () => {
    const apiUrl = `https://d.ceo/api/breeds/image/q`;
    setApiUrl(apiUrl);
  };
  const dogName = res.response.status;
  const imageUrl = res.response.message;
  return (
    <div className="App">
      <div>
        <button onClick={apiCallAgain}>API Call</button>
        <h3>{dogName}</h3>
        <div>
          <img src={imageUrl} alt="avatar" />
        </div>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

打开控制台，并默认检查res对象。现在，单击API Call按钮并再次检查res对象。当我在开始时使用useState null时，为什么会显示旧状态？

Answer 1

重新渲染组件时，挂钩不会重新初始化它们中的所有状态。在这种情况下，State无法正常工作（更改状态时组件会重新渲染）。

对于每个渲染，useState挂钩会存储并返回该渲染的特定值。在您的情况下，API_URL发生更改时，useEffect重新运行，但是状态变量没有变化。

来自docs：

这是一种在函数调用之间“保留”某些值的方法- useState是一种使用完全相同的功能的新方法 this.state提供一个类。通常，变量在以下情况下“消失” 函数退出，但状态变量由React保留。

对此的一种解决方法是重置useEffect中的响应和错误状态：

 React.useEffect(() => {
    setResponse(null);
    setError(null);
    const FetchData = async () => {
      try {
        const res = await fetch(url, options);
        const json = await res.json();
        setResponse(json);
        // console.log("json - ", json);
      } catch (error) {
        // console.log("error - ", error);
        setError(error);
      }
    };
    FetchData();
  }, [url]);

React钩子第二次使用useEffect调用API，并且第一次调用API响应也返回

1 个答案: