forEach - 在 Redux 中向 action.data 添加键/值 - console.log 有效，但 Redux 状态未更新答案

【问题标题】：forEach - adding key/value to action.data in Redux - console.log works but Redux state not updatedforEach - 在 Redux 中向 action.data 添加键/值 - console.log 有效，但 Redux 状态未更新
【发布时间】：2020-05-04 11:42:04
【问题描述】：

在异步 Redux 操作中，我使用 graphQL 收集一些数据，然后调用另一个异步操作，该操作在对象中循环（使用 forEach）并添加一些键。

在UserTopicActions.js:


export const sendGetUserTopicSuccess = data => ({
    type: action_types.SEND_GET_USER_TOPIC_SUCCESS,
    data
});
 ...

export function sendGetUserTopic(user_id, nextToken = null) {
    return async (dispatch) => {
        dispatch(sendGetUserTopicBegin());
        ...
        try {
            const data = await API.graphql(graphqlOperation(gqlUserTopic.getUserTopic, variables))
            data_uri = await getCarouselImgUri(data.data.getUserTopic)
            dispatch(sendGetUserTopicSuccess(data_uri));

        } catch (err) {
            dispatch(sendGetUserTopicFailure(err));
        }
    };
}

在amplifyAsync.js:

import { Storage } from 'aws-amplify';

export default async function getCarouselImgUri(raw_data) {
    data = JSON.parse(raw_data.data)
    topics = data.topics
    // Fetching thumbnails for cards
    let card_img_uri
    topics.forEach((topic) => {
        topic['subtopics'].forEach(async (subtopic) => {
            card_img_uri = 'topic/' + topic.id + '/' + subtopic.id + '/' + 'thumbnail.jpg'
            subtopic['uri'] = await Storage.get(card_img_uri)      <------------ New Key!
        })
    })
    console.log(topics)
    return topics

}

在UserTopicReducer.js

export default (state = initialState, action) => {
    switch (action.type) {
        case SEND_GET_USER_TOPIC_BEGIN:
            return {
                ...state,
                isGettingUserTopic: true,
            };
        case SEND_GET_USER_TOPIC_SUCCESS:
            console.log(action.data)
            return {
                ...state,
                isGettingUserTopic: false,
                topics: action.data
            };
    ...

如果我在 reducer 中控制台记录 action.data，我会看到新键。另一方面，在 状态和已调度的SEND_GET_USER_TOPIC_SUCCESS 操作中，新键不存在。

为什么？如何在 Redux 异步操作的数据中添加新键？

【问题讨论】：

经过痛苦的几个小时后，我发现了错误：

标签： javascript reactjs redux foreach

【解决方案1】：

经过几个痛苦的小时后，我发现了错误：

在amplifyAsync.js: Async ... wait 不保证 forEach() 中的所有承诺都已解决。

我认为最好的解决方案是将所有承诺放在一个数组中，然后使用 promise.all，但是由于我想保持相同的字典结构（并且 promise.all 不适用于字典），所以我暂时使用了普通的查找和异步等待。这样，所有请求都按顺序完成。这是一个未优化的解决方案，但目前可以使用。

在调试 Promise 时，请确保您使用console.log(JSON.stringify(data))，否则标准的 console.log(data) 可能会打印出在执行时可能不可用的已解决 Promise 的值。

【讨论】：