Блог

Главная - Вопросы по программированию - Разделение функций по всему проекту в React?

Разделение функций по всему проекту в React?

#javascript #reactjs #forms #react-native

Вопрос:

Итак, я новичок в реагировании и создал приложение, которое получает некоторые данные из API и сохраняет их в таблице. Это сработало, но большая часть кода была в одном файле, что меня очень раздражало. Теперь я пытаюсь разделить его на несколько файлов, но пока без особой удачи.

Я последовал ответу, в котором говорилось, что я могу просто создать APIManager и использовать следующий код:

 import React from 'react';

const base_url = 'https://europe-west1-single-router-309308.cloudfunctions.net/GET?';

export let buildURL = (offset, pagination, product_name, store_name) => {
    [...]
}

Однако это дает мне TypeError: Object(...) is not a function . Я попробовал это с помощью простой функции, функции экспорта и этого, но ничего не работает. Должен ли я сделать из этого компонент? Именно здесь код вызывается:

 <div className='header'>
          <Form handleSubmit={(offset, pagination, product_name, store_name) => {buildURL(offset, pagination, product_name, store_name)}}/>
</div>

Комментарии:

1. Как вы импортируете buildURL свой компонент?

2. @digitalbreed import buildURL from './src/managers/APIManager';

3. Вы используете именованный экспорт. Попробуйте либо import { buildURL } from ... или import * as APIManager from ... и измените вызов на APIManager.buildURL .

4. Хм, и то, и другое не делает трюка.

Ответ №1:

Хорошо, с помощью @digitalbreed мне удалось это исправить! Я изменился

 import buildURL from './src/managers/APIManager';

Для

 import * as APIManager from './src/managers/APIManager';

и изменил мою ссылку на код с

 <Form handleSubmit={(offset, pagination, product_name, store_name) => { APIManager.buildURL(offset, pagination, product_name, store_name)}}/>

Для

 <Form handleSubmit={() => this.handleSubmit(offset, pagination, product_name, store_name)}/>

с

 handleSubmit(offset, pagination, product_name, store_name){
  var url = APIManager.buildURL(offset, pagination, product_name, store_name);

И сейчас это прекрасно работает. Спасибо за помощь, digitalbreed!

Комментарии:

1. Что ж, учитывая предоставленную информацию, проблема будет заключаться в названном экспорте. Вы выполнили импорт по умолчанию, и, вероятно, в вашем файле APIManager не было никакого значения по умолчанию. В вашем ответе можно спросить, откуда value сейчас берется, но, по крайней мере, сейчас это работает на вас! Рад, что смог вам помочь.

2. Справедливости ради, я изменил метод в своем коде, но это не очень хорошо отражается на ответе. Я его отредактировал!

Метки: