javascript - 将 JSON 对象导出到另一个 .js，无需类声明react-native

Question

我正在开发一个移动应用程序，它使用 fetch api 进行 GET 调用。我陷入困境，我试图将 json 对象(使用 fetch 方法从服务器获取)导出到另一个 .js 文件以用作数组，但是当我在 another.js 中导入我的函数(如下)时，它什么也不返回。我使用控制台测试了我的 fetch 方法，因此它按预期工作，但是我无法处理另一个.js 文件中的数据。顺便搜了很多，找到了这个帖子Helpful ，但没有工作。

下面的代码是获取部分并导出它的实现。(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，其中导入 fetch 函数并处理返回的 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;
};

有什么推荐吗？谢谢

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>
    );
  }
}