Question

我有一个非常基本的笔记应用程序。类似于iphone便笺，您可以在便笺项上按以更新该项目。

我在我的Reducer中做了一个更新项目的功能。但是该项目没有更新，在我调用它后保持不变。如果这不是问题，那可能就是我要渲染的方式。

Reducer函数中就是这种情况：

const tagReducer = (state = [], action) => {

    switch (action.type) {

        case 'NEW_LIST':
             //add tags and mentions later
            const { id, title, tags, mentions } = action.payload;
            return [
                ...state,
                {
                    id: id,
                    title: title,
                    tags: tags,
                    mentions: mentions
                }
            ]
        case 'UPDATE_LIST':

            return state.map((item, index) => {
                if (item.id == action.payload.id) {
                    item = { 
                        ...item,
                        title: action.payload.title,
                        tags: action.payload.tags,
                        mentions: action.payload.mentions
                    }
                }
                return item
            })

        default: 
            return state;
    }
};


export default tagReducer;

这是保存便笺（列表）时发生的情况-发生NEW_LIST操作或发生UPDATE_LIST操作。

    save = () => {
        if (this.props.route.params.data !== null) {
            this.props.updateList(
                id = this.props.route.params.id,
                title = this.state.title,
                tags = this.state.tags,
                mentions = this.state.mentions
            )
        } else {
            this.props.newList(
                title = this.state.title, 
                tags = this.state.tags,
                mentions = this.state.mentions
            )
        }
        this.props.navigation.navigate('Home');
    }

操作如下：

let nextId = 0;

export const newList = (title, tags, mentions) => (
    {
        type: 'NEW_LIST',
        payload: {
            id: ++nextId,
            title: title,
            tags: tags,
            mentions: mentions
        }
    }
);

export const updateList = (title, tags, mentions, id) => (
    {
        type: 'UPDATE_LIST',
        payload: {
            id: id,
            title: title,
            tags: tags,
            mentions: mentions
        }
    }
);

Answer 1

尝试一下：

    case 'UPDATE_LIST':
        return state.map((item, index) => {
            if (item.id === action.payload.id) {
                return { 
                    ...item,
                    title: action.payload.title,
                    tags: action.payload.tags,
                    mentions: action.payload.mentions
                }
            }
            return item
        })

Redux-如何更新数组中的项目

1 个答案: