Question

我试图弄清楚为什么我的自定义钩子出现错误。我的钩子调用了一个需要我提供的密钥的api。

这就是我正在使用的东西：这是我获取API的钩子

import React from "react";
import axios from "axios";
const useFetch = async => {
  const [response, setResponse] = React.useState(null);
  const [error, setError] = React.useState(null);
  React.useEffect(() => {
    async function fetchData() {
      try {
        const res = await axios.get(
          "https://newsapi.org/v2/everything?apiKey=9e48dbd7f1a346599a0bbfe8f8386484",
          {
            params: {
              q: "bitcoin"
            }
          }
        );

        setResponse(res);
      } catch (error) {
        setError(error);
      }
    }

    fetchData();
  }, []);
  return { response, error };
};
export default useFetch;

这是我正在使用此钩子的页面：

import React from "react";
import useFetch from "../hooks/useFetch";
import "../css/Layout.scss";
import Card from "./Card";

function Layout() {
  const { response, error } = useFetch();

  console.log(error, "error");

  console.log(response);

  return (
    <div className="Layout__container">
      <div className="Layout__container__mainColumn"></div>
      <div className="Layout__container__rightColumn"> right </div>
    </div>
  );
}

export default Layout;

当我console.log响应时，我得到了想要的结果，但是当我尝试将articles映射到响应中甚至是console.log(response.data);时，我得到了错误TypeError: Cannot read property 'data' of null，我不明白为什么。有人可以帮我吗？

Answer 1

响应的第一个值为空

const [response, setResponse] = React.useState(null);

为避免错误，您可以使用空数组初始化

const [response, setResponse] = React.useState([]);

Answer 2

最初，渲染响应可能为null。您需要先检查响应是否存在，然后从中获取数据。

Answer 3

const res = await axios.get("http...",{params: {q: "bitcoin" }});
let data = await res.json() //if the response is json
setResponse(data)

看起来您需要等待响应。

TypeError：无法读取null反应挂钩的属性'data'

3 个答案: