Redux - как обновить элемент в массиве - PullRequest
0 голосов
/ 22 апреля 2020

У меня есть очень базовое приложение c notes. Аналогично iphone заметкам, когда вы нажимаете на элемент заметки, чтобы обновить этот элемент.

Я сделал функцию в своем редукторе для обновления элемента. Но элемент не обновляется, он остается прежним после того, как я его назову. Это может быть то, как я это делаю, если это не проблема.

Вот случай с функцией Редуктора:

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

1 Ответ

0 голосов
/ 22 апреля 2020

Попробуйте это:

    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
        })
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...