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

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

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如何将excel导入到datagrid,然后通过db值进行过滤。

2022-4-22 19:09:58

解决方案

Express.js的PUT请求没有更新MongoDB。

2022-4-22 19:10:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索