时间戳

首页 > 解决方案 > 如何在 React 中为不同的 json 结构创建可重用的 fetch？

javascript - 如何在 React 中为不同的 json 结构创建可重用的 fetch？

问题描述

我在不同的组件中使用 fetch：

    fetch(url)
      .then(result => {
        if (!result.ok) {
          throw new Error("HTTP error " + result.status)
        }
        return result.json()
      })
      .then(result => {
        this.setState({
          data: result,
        })
      })
      .catch(error => {})

但是json数据有不同的结构：

  state = {
    data: [],
  }

和

  state = {
    data: {
      items: [],
    }
  }

我想为这两种结构制作一个可重用的功能组件。如果可能，如何创建它？我试着用这个

export function getList(url) {
    fetch(url)
        .then(result => {
            if (!result.ok) {
                throw new Error("HTTP error " + result.status)
            }
            return result.json()
        })
        .then(result => {
            return result
        })
        .catch(error => {})
}

对两者都有相同的要求

      this.setState({
        data: getList(url),
      })

但是遇到了错误Cannot read property 'map' of undefined

标签： javascriptjsonreactjsfetch

解决方案

你得到错误'但有一个错误无法读取未定义的属性'map''，因为函数返回未定义。您需要返回fetch

export function getList(url) {
    return fetch(url)
....
}

现在，假设 getList 以这种格式返回数据

data: {
      items: [],
    }

您保持返回的数据相同，只需更改组件的映射。所以基本上你重用了 fetch 调用。

第一个组件：

async getSetData(url){
    const data = await getList(url);
        this.setState({
                data: data,
              })
}

第二部分：

async getSetData(url){
    const data = await getList(url);
        this.setState({
                data: data.items,
              });
}

推荐阅读