Как создать многоразовую выборку для разных json структур в React?

Question

Я использую выборку в разных компонентах:

    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

Answer 1

Вы получаете сообщение об ошибке «Но возникла ошибка. Невозможно прочесть свойство« карта »неопределенного значения», потому что функция возвращает значение undefined. Вам нужно return fetch

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

Теперь, предполагая, что getList возвращает данные в этом формате

data: {
      items: [],
    }

, вы сохраняете возвращаемые данные такими же, и просто меняете сопоставления для составные части. Таким образом, в основном вы повторно используете вызов выборки.

1-й компонент:

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

2-й компонент:

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