在单独的组件中获取 json

Question

我已经创建了一个应用程序，并且想添加更多组件，这些组件将使用我在“personlist.js”中获取的相同 json，所以我不想在每个应用程序中都使用 fetch()，我想做一个只做fetch的单独组件，在其他组件中调用它，然后在每个组件中映射函数，如何使只获取组件？

这是我的获取方法：

componentDidMount() {
    fetch("data.json")
      .then(res => res.json())
      .then(
        result => {
          this.setState({
            isLoaded: true,
            items: result.results
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        error => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      );
  }

这是一个沙盒 sn-p https://codesandbox.io/s/1437lxk433?fontsize=14&moduleview=1

Answer 1

我不明白为什么这需要成为一个组件，而只是一个其他组件使用的功能。

但是，如果您希望它成为其他组件使用的组件，请让它们将映射函数传递给它以用作道具，然后在您取回项目时在componentDidMount 中使用它，并渲染映射的项目在render。

---

在您已澄清的评论中：

我试图获取 json 一次，但我不确定最好的方法是什么。

在那种情况下，我不会使用组件。我将调用放在一个模块中，并让模块公开承诺：

export default const dataPromise = fetch("data.json")
    .then(res => {
        if (!res.ok) {
            throw new Error("HTTP status " + res.status);
        }
        return res.json();
    });

使用 Promise 的代码会这样做：

import dataPromise from "./the-module.js";
// ...
componentDidMount() {
    dataPromise.then(
        data => {
            // ...use the data...
        },
        error => {
            // ...set error state...
        }
    );
}

数据在模块加载时获取一次，然后每个组件都可以使用它。模块将数据视为只读，这一点很重要。 （您可能希望模块导出一个创建防御性副本的函数。）

Answer 2

不确定这是否是您正在寻找的答案。

fetchDataFunc.js

export default () => fetch("data.json").then(res => res.json())

组件.js

import fetchDataFunc from './fetchDataFunc.'

class Component {
  state = {
    // Whatever that state is
  }

  componentDidMount() {
    fetchFunc()
      .then(res => setState({ 
        // whatever state you want to set
      }) 
      .catch(err => // handle error)
  }
}

Component2.js

import fetchDataFunc from './fetchDataFunc.'

class Component2 {
  state = {
    // Whatever that state is
  }

  componentDidMount() {
    fetchFunc()
      .then(res => setState({ 
        // whatever state you want to set
      }) 
      .catch(err => // handle error)
  }
}

您还可以有一个 HOC，它只获取一次数据并在不同组件之间共享。