React hooks useEffect 第二次调用 API 和第一次调用 API 响应也返回

我正在使用 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的教程代码

检查我的确切代码代码沙箱

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那么为什么在开始时会显示旧状态？

当组件重新渲染时，钩子不会重新初始化其中的所有状态。如果是这种情况，状态就不能不起作用（当您更改状态时组件会重新呈现）。

相反，对于每个渲染，useStatehook 存储并返回该渲染的特定值。在你的情况下，当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]);