Экспорт объекта JSON в другой файл .js без объявления класса реакции-нативного

Question

Я занимаюсь разработкой мобильного приложения, которое выполняет вызовы GET, используя fetch api.Я застрял в том, что я пытаюсь экспортировать объект json (полученный с сервера методом fetch) в другой файл .js для использования в качестве массива, но когда я импортирую свою функцию в another.js (ниже), он ничего не возвращает.Я протестировал свой метод извлечения с помощью консоли, чтобы он работал, как и ожидалось, однако я не могу обработать данные в другом файле .js.Кстати, я много искал и нашел этот пост Полезно , но не сработало.

Ниже приведен код реализации части извлечения и ее экспорта (Products.js).

import React, { PureComponent,Component } from "react";
 import { connect } from "react-redux";
 import { View } from "react-native";
 import { productsDataSelector } from      "../../Products/ProductsSelectors";
 import ProductsList from "../../ProductsList/ProductsList";
 import Product from "../../Product/Product";
 import { NavigationActions, StackActions } from "react-navigation";
 import AnotherComponent from "../../Products/ProductsReducer";
 class Products extends PureComponent  {

  render() {
const { navigation } = this.props;

const { productsData } = this.props;
return (


  <View>
    <ProductsList list={productsData} isSortable>
      {product => <Product product={product} />}
    </ProductsList>
  </View>
     );
  }
}

 const mapStateToProps = state => ({
   productsData: productsDataSelector(state)
 });
  export  const  getMoviesFromApiAsync = () =>
 fetch('http://localhost:8080/JweSecurityExample/rest/security/retrieveItems')
.then((response) => response.json())


export default connect(
  mapStateToProps,
  null
     ) (Products);

Ниже приведен код файла another.js, в котором выполняется импорт функции извлечения и обработки возвращаемого объекта json без объявления класса.

import React, { Component } from "react";
 import {getMoviesFromApiAsyncc} from "../screens/Products/Products";


 const fakeData = [];



 export const someFunc = () => {

 fetch('http://localhost:8080/JweSecurityExample/rest/security/retrieveItems')
   .then((response) => response.json())
  .then((responseJson) =>     console.log("responsee:"+JSON.stringify(responseJson)))
  .then((responseJson) =>  {fakeData:JSON.stringify(responseJson)})

  .catch((error) => {
    console.error(error);
      });

};
someFunc();

const initialState = {
  data:this.fakeData

};

export default (state = initialState,action) => {
  return state;
};

Есть какие-нибудь рекомендации??Thanx

Answer 1

Я не вижу, где в вашем коде вы вызываете someFunc и еще одну вещь, которую вам нужно заключить в объект, который вы возвращаете из someFunc, в скобках, иначе он будет рассматриваться как тело функции.

export const someFunc = () => {
  getMoviesFromApiAsync().then(response => {
    fakeData = JSON.stringify(response)
  })
};
someFunc();

Я предлагаю переместить getMoviesFromApiAsync в отдельный файл и вызвать его из своего компонента, чтобы получить список фильмов.

api.js

export const getMoviesFromApiAsync = () =>
  fetch('http://localhost:8080/JweSecurityExample/rest/security/retrieveItems')
    .then((response) => response.json());

product.js

import React, { PureComponent,Component } from "react";
import { connect } from "react-redux";
import { View } from "react-native";
import { productsDataSelector } from      "../../Products/ProductsSelectors";
import ProductsList from "../../ProductsList/ProductsList";
import Product from "../../Product/Product";
import { NavigationActions, StackActions } from "react-navigation";
import AnotherComponent from "../../Products/ProductsReducer";
// import getMoviesFromApiAsync
import { getMoviesFromApiAsync } from 'PATH_TO_API.JS'


class Products extends Component {

  async componentDidMount(){
    const list = await getMoviesFromApiAsync();
    console.log(list);
  }

  render() {
    const { navigation } = this.props;

    const { productsData } = this.props;
    return (


      <View>
        <ProductsList list={productsData} isSortable>
          {product => <Product product={product} />}
        </ProductsList>
      </View>
    );
  }
}