Question

我是新来的反应和redux，我面临一个非常奇怪的问题。我的行动如下：

export function getStorySnippetsAction(snippetsLink, channel) {

return dispatch => {
    let storiesSnoppet = [];

    for (var i = 0; i < snippetsLink.length; i++) {

        $.ajax({
            url: snippetsLink[i],
            dataType: 'json',
            cache: false,
            success: function (data) {
                storiesSnoppet.push(data);
                console.log("xxxxxxxxxxxxxxxxxxxxx");
                console.log(storiesSnoppet);

            }.bind(this)
        });
    }


    dispatch({
        type: "SET_STORY_SNIPPET",
        payload: {"channel": channel, "storiesSnippet": storiesSnoppet}

    });

};

}

正如您所看到的，我在循环中有一些ajax调用，然后我使用dispach来设置状态。现在我的问题是ajax调用是异步的，所以当ajax发送请求时，调度发生并且不等待所有ajax调用完成。以下是我在控制台中打印出payload.action时得到的结果：

正如您所看到的，当对象折叠时它的大小为0，当我展开它时，我可以看到一个arraylist中的一些对象。我对这种奇怪行为的唯一猜测是异步调用在渲染之后完成，因为componentdidmount（我在其中调用了getStorySnippetsAction）只是在重新渲染没有再次发生并且我没有看到任何结果时发生。有人告诉我把我的调用放在componentdidupdate里面的getStorySnippetsAction但是当我这样做时，似乎发生了一个无限循环并且页面永远不会加载（我可以看到在控制台中同样的东西再次写入并获得意味着组件做了更新无限调用）。现在我完全卡住了。如果我在componentdDidUpdate中调用getStorySnippetsAction，我将处于无限循环中，如果我在componentDidMount中调用它，则ajax需要更长时间才能使用空数组进行渲染和渲染，而不是加载ajax结果。

有人可以帮忙吗？（甚至一个想法可以帮助我解决这个问题。万分感谢）

Answer 1

为什么不在从oninput="console.log(this)"模块回调而不是for循环后调度你的调度？

示例：

async

Answer 2

这里的想法是将每个请求转换为Promise并将其存储在数组中。每个请求完成后，我们将使用数据解决它。最后，一旦解决了数组中的所有promise，我们就会使用已解析的值调用dispatch。

export function getStorySnippetsAction(snippetsLink, channel) {

  return dispatch => {
    let storiesSnoppet = [];

    for (var i = 0; i < snippetsLink.length; i++) {
      storiesSnoppet.push(new Promise((resolve, reject) => {
        $.ajax({
          url: snippetsLink[i],
          dataType: 'json',
          cache: false,
          success: function(data) {
            resolve(data);
            console.log("xxxxxxxxxxxxxxxxxxxxx");
            console.log(storiesSnoppet);
          }.bind(this)
        });
      }));
    }

    Promise.all(storiesSnoppet).then((values) => {
      dispatch({
        type: "SET_STORY_SNIPPET",
        payload: {
          "channel": channel,
          "storiesSnippet": values
        }
      });
    });
  };
}

渲染发生后，ajax调用加载

2 个答案: