将JSON对象导出到另一个.js，而没有类声明反应

Question

我正在开发一个移动应用程序，该应用程序使用fetch api进行呼叫。我一直在尝试将JSON对象（用fetch方法获取）到另一个.js文件以用作数组，但是当我将我的函数导入另一个.js（下图）时，它却一无所获。我使用控制台测试了我的获取方法，因此它可以按预期工作，但是我无法在另一个文件中处理数据。顺便说一句，我搜索了很多，发现这篇文章有帮助，但没有起作用。

以下代码是Fetch零件的实现并导出它。（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);

下面的代码是另一个。

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