Question

我正在开发一个用React.js编写的应用程序，在那里我从JSON提要中获取数据，然后我将在应用程序中以各种方式使用这些数据。

我通过axios调用Feed：

module.exports = {
  getMainPlaylist: function () {
    var requestUrl = `${MAIN_PLAYLIST_FEED_URL}`;

    return axios.get(requestUrl).then(function (res) {
      return res.data.playlist
    }, function (err) {
      alert('error');
    });
  }
};

在我的app.jsx文件中，我有以下内容：

store.subscribe(() => {
  var state = store.getState();
  console.log('New state: ', state);
});

var mainPlaylist = MainPlaylistAPI.getMainPlaylist();
store.dispatch(actions.addMainPlaylist(mainPlaylist));

在我的操作文件中，我有这个：

export var addMainPlaylist = (mainPlaylist) => {
  return {
    type: 'ADD_MAIN_PLAYLIST',
    mainPlaylist
  }
};

在我的Redurs文件中，我有这个：

export var playlistReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_MAIN_PLAYLIST':
      return [
        ...state,
        ...action.mainPlaylist
      ];
    default:
      return state;
  }
};

当我正常使用状态来获取数据时，它工作正常，但我认为因为我试图将商店与Web服务一起使用，因为异步过程可能无法正常工作。

当我登录控制台时，我得到了这个：

console 1

console 2

我来自.NET背景，所以我只是在JavaScript中工作，我不知道从哪里开始修复它。

感谢任何帮助！

Answer 1

我自己设法解决了这个问题。

Axios是一个基于承诺的客户端，因此我使用了.then（），我称之为。

所以这个：

＆＃13;

var mainPlaylist = MainPlaylistAPI.getMainPlaylist();
store.dispatch(actions.addMainPlaylist(mainPlaylist));

＆＃13;

成为这个：

＆＃13;

MainPlaylistAPI.getMainPlaylist().then(function (data) {
  store.dispatch(actions.addMainPlaylist(data));
}, function(e) {
  // Handle errors
});

＆＃13;

在React.js

1 个答案: