Question

我无法找到此自定义钩子的问题所在？

import { useState, useEffect } from "react";

const SAMPLE_DATA_URL = "../feed/sample.json";

const useFetch = () => {
  const [response, setResponse] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const doFetch = async () => {
      setLoading(true);

      await fetch(SAMPLE_DATA_URL)
        .then(res => res.json())
        .then(jsonData => {
          setResponse(jsonData);
        })
        .catch(err => setError(err))
        .finally(() => setLoading(false));
    };
    doFetch();
  },[]);

  return { response, error, loading };
};
export default useFetch;

在“网络”选项卡上，我可以看到200 OK，但预览显示“您需要启用JavaScript才能运行此应用”。而且响应是我的索引屏幕的html。我检查了浏览器中的javascript是否被允许，并且json文件是有效的json。

返回对象时出现错误：true

使用它的地方

    import React from "react";
import styles from "./Series.module.css";
import { TitleBar } from "../../atoms";
import {useFetch} from '../../utils';

const Series = () => {

const { response, loading, error }  = useFetch();


  return (
    <div >
      <TitleBar>Popular Series</TitleBar>
      <div className={styles.content}>
      {loading && <p>Loading...</p>}
      {error && <p>Oops, Something went wrong...</p>}
      {response && <p>response</p>}
      </div>

    </div>
  );
};



export default Series;

Answer 1

如果使用的是CRA，则可以将sample.json放在公共文件夹中，这样就可以直接获取URL：

fetch("sample.json")
  .then(...)
  .then(...)

尽管您不需要做所有事情，因为您可以像导入其他js modules

一样导入数据

import data from "./sample.json"; // Path

const App = () => {
  return (
    <div className="App">
      {data.map(item => {
        // return JSX with item...
      })}
    </div>
  );
};

codesandbox 示例。

自定义钩子中的错误，用于获取本地json

1 个答案: