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

Posted 2023-02-05

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