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

Posted 2021-03-19

我有一个非常基本的笔记应用。类似于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
        }
    }
);

答案

试试这个..:

    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
        })