3

我正在使用 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}

我为获取 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对象。当我null在开始时使用 useState 时，为什么会显示旧状态？

4

1 回答 1

2

当组件重新渲染时，钩子不会重新初始化其中的所有状态。如果是这种情况，状态将无法工作（更改状态时组件会重新渲染）。

取而代之的是，对于每个渲染，useState挂钩存储并返回该渲染的特定值。在您的情况下，API_URL更改会useEffect重新运行，但状态变量不会。

从文档：

这是一种在函数调用之间“保留”某些值的方法——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]);
于 2019-07-31T18:08:41.957 回答