ReactJs сделать отдельный файл для выборки

Question

В некоторые дни go я задавал вопрос о Laravel, но теперь я сделаю выстрел с Nodejs и React. Основная цель:

• левая строка с 4 вариантами выбора,
  • Зависит от первого выбора, вторая покажет некоторую информацию.
  • таблица с информацией из выбора.
• Справа / по центру
  • Отображение API карт Google.
• Справа внизу / по центру.
  • Панель с вкладками. (информация из отдельного объекта из таблицы).

Для этого я хочу создать файл с функциями выборки для дальнейшего использования. Есть ли способ настроить функцию выборки в файле и повторно использовать ее?

import React, { Component } from 'react';
import { fetch_function } from './fetch_file';

class App extends Component {
constructor(props) {
    super(props);
    this.state = {
        Items: [],
        is_loaded: false,
    }
    url = "http://localhost:4000";
    this.fetch_function(url, this.state, "Items");
}

componentDidMount() {
}

render() {
    var { is_loaded, Items} = this.state;

    const options_select_items = Items.map((Item, id) => {
        return ({ value: Item.id, label: Item.Name })
    })

    return (
        <Form>
            <Form.Group as={Row} controlId="formHorizontalClientes">
                <Form.Label column sm={3}>
                    Cliente
                </Form.Label>
                <Col sm={9}>
                    <Select
                        closeMenuOnSelect={true}
                        defaultValue={[system_default[0]]}
                        isMulti
                        options={options_select_items}
                    />
                </Col>
            </Form.Group>
        </Form>

    );
}
}
export default App;

А это fetch_file

const fetch_function = (url, setState, param) => {
    fetch(url)
        .then(response => {
            if (!response.ok) {
                throw Error("Network failure")
            }
            return response;
        })
        .then(res => res.json())
        .then(data => {
            setState({
                [param]: data
            })
        })
        ;
}

module.exports.fetch_function = fetch_function ;

Answer 1

Да, это возможно и настоятельно рекомендуется, особенно если ваш проект расширяется.

Я предлагаю использовать ax ios, поскольку он автоматически возвращает JSON и его легче использовать, чем API извлечения.

Я также не предлагаю изменять состояние в этом файле, так как это станет кошмаром при обслуживании и отладке кода.

Создание fetch.js (или как бы вы это ни называли)

import axios from 'axios';
const apiBaseURL = 'www.whatever.com'

export const GET = url => {
    return axios.get(`${apiBaseURL}/${url}`);
}

// if need for headers etc.

const headers = 'some headers';

export const POST = (url, data) => {
    return axios(`${apiBaseURL}/${url}`, {
        method: 'POST',
        headers,
        data,
    });
}

В компоненте реагирования:

импортируйте файл вверху:

import { GET, POST } from './fetch.js';

В методе компонента:

async getData(apiEndpoint) {
    const { data: Items } = await GET(apiEndpoint);
    if (Items) {
      // Set data to state
      this.setState({ Items });
    }
    else {
      // error
    }
}

То же самое можно достичь с помощью простого API извлечения.