Две вещи, которые вам нужно знать, когда вы хотите повторно использовать данные вместо того, чтобы снова и снова вызывать fetch
Делать выборку в самом верхнем компоненте, т.е. родительском компоненте, и передавать данныедля всех детей, от детей к детям, но, помните, это будет беспокойно для вас.Этот подход хорош, когда вы создаете небольшое приложение, которое будет максимально от 50 до 50 компонентов.Но когда ваше приложение расширяется, это не рекомендуемый способ повторного использования данных между компонентами.
Используйте библиотеку управления состоянием Redux для повторного использования данных между компонентами.Это действует как централизованный магазин для вашего приложения.В наши дни это используется в основном в каждом приложении React.С помощью Redux вы можете сделать вызов действия в родительском компоненте, и это действие фактически извлечет данные и передаст их редуктору.Теперь редуктор установит данные в хранилище Redux.Теперь данные доступны в каждом компоненте, получая данные из хранилища Redux с помощью state.get.Таким образом, вы можете вызвать избыточное действие, например this.props.getItems ();где бы вам ни понадобились данные в компоненте, а компонент mapStateToProps сделает эти данные доступными для вашего компонента в качестве реквизита
Как получить данные из хранилища Redux?
Определитьфункция mapStateToProps в компоненте и получение данных из хранилища Redux с помощью state.get и возврат их в функцию.Передайте mapStateToProps для подключения метода.Вы будете подключать ваш компонент к компоненту Redux HOC, который называется connect.Этот метод подключения принимает действия и состояние Redux и делает их доступными для компонента как реквизиты.
Относительно вашей проблемы
Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined
Причина, по которой вы получаете эту проблему, потому что она недоступна в экспортированной функции getItems.
Что нужно сделать, чтобы исправитьпроблема заключается в том, чтобы передать это функции getItems в качестве параметра
Примечание: здесь это текущий контекст
import { getItems } from '../helpers/helpers';
componentDidMount(){
getItems(this);
}
helpers.js:
the below function is treated as a normal JavaScript function. This function no wr belongs the component to bind it in component constructor. But in order to play with the state of the component you need to pass the component context this. But this is old way, now a days we all use Redux to avoid these old concepts
export function getItems(this) {
fetch('./data/data_arr.js')
.then(results => results.json())
.then(results => this.setState({'items': results}));
}
Таким образом, вы можетеповторно используйте эту функцию и выполните setState.
Но помните, что эти решения усложнят, когда ваше приложение станет больше в будущем.Поэтому я бы посоветовал вам использовать библиотеку управления состоянием Redux, чтобы избежать беспокойной миграции в будущем:)
Извините, если есть какие-либо опечатки, потому что я отвечаю со своего мобильного телефона.