Question

我正在尝试在.then语句中导出数组，但是它不起作用。我不知道如何使它工作。实际上，我只是想将redux的初始状态设置为从电影数据库api接收到的静态数据。

import { API_URL, API_KEY } from '../Config/config';

const urls = [
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=2`,
]

Promise.all(urls.map(items => {
return fetch(items).then(response => response.json())
}))

.then(arrayOfObjects => {
var arr1 = arrayOfObjects[0].results;
var arr2 = arrayOfObjects[1].results;
export var movieData = arr1.concat(arr2);   
}
)

Answer 1

您可以尝试使用功能。像这样：

import { API_URL, API_KEY } from '../Config/config';

export const getMovies = () => {
   const urls = [
   `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
   `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=2`,
  ]

  const promises = urls.map(url => {
    return new Promise((reject, resolve) => {
     fetch(url).then(res => res.json())
      .then(res => resolve(res.results))
    })
  })

  return Promise.all(promises)
}

//其他文件

import {getMovies} from 'YOUR_API_FILE.js';

getMovies().then(moviesArr => {
   // your business logics here
})

Answer 2

尚不清楚此代码与状态/归约器的关系，但理想情况下，您应该使用动作创建者来处理所有API调用并调度状态更新，并且可以从组件中调用这些动作创建者。

因此，请使用一个空数组初始化状态：

const initialState = {
  movies: []
};

设置您的reducer以使用MOVIES_UPDATE更新状态：

function reducer(state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case 'MOVIES_UPDATE': {
      return { ...state, movies: payload };
    }
  }
}

您仍然可以使用函数来获取数据：

function fetchData() {
  return Promise.all(urls.map(items => {
    return fetch(items).then(response => response.json());
  }));
}

..，但是它被一个动作创建者调用（它返回一个带有调度参数的函数），而这个动作创建者1）获取数据，2）合并数据，3）并将数据分配到商店。 >

export function getMovies() {
  return (dispatch) => {
    fetchData().then(data => {
      const movieData = data.flatMap(({ results }) => results);
      dispatch({ type: 'MOVIES_UPDATE', payload: movieData });
    });
  }
}

它是从您的组件内部调用的，就像这样：

componentDidMount () {
  this.props.dispatch(getMovies());
}

Answer 3

您可以如下修改代码：

import { API_URL, API_KEY } from '../Config/config';
let movieData='';

exports.movieData = await (async function(){

const urls = [
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`,
`${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=2`,
];

const arrayOfObjects = await Promise.all(urls.map(items => {
return fetch(items).then(response => response.json())
}));

 return arrayOfObjects[0].results.concat(arrayOfObjects[1].results);
 })();

如何返回从.then语句中获取api数据收到的数组？

3 个答案: