react-native与redux deleteTodo操作错误

时间:2018-10-15 13:11:35

标签: react-native redux

我是新来的人,可以通过这个简单的TodoApp响应本地学习。 尝试从redux状态删除Todo时发生奇怪的行为。

这是我的todosReducer代码:

select * 
from events
where event_status = 'approved'
   and event_code not in(select left (document_code, 6) 
                         from documents 
                         group by left (document_code, 6) 
                         having count <>2)

在deleteTodo情况下使用

import uuidv4 from 'uuid/v4'

import { ADD_TODO, EDIT_TODO, DELETE_TODO, TOGGLE_TODO } from 

    '../actions/actionTypes'

    const initialState = [
        {
            id: uuidv4(),
            text: 'Task 1',
            details: 'Task 1 Details',
            completed: true,
        },
        {
            id: uuidv4(),
            text: 'Task 2',
            details: 'Task 2 Details',
            completed: false,
        }
    ]

    export const todosReducer = (state = initialState, action) => {
        switch (action.type) {
            case ADD_TODO:
                return [...state, { id: uuidv4(), text: action.text, details: action.details, completed: false }]
            case EDIT_TODO:
                return state.map(todo => {
                    if (todo.id === action.id) {
                        return { ...todo, text: action.text, details: action.details }
                    }
                    return todo
                })
            case DELETE_TODO:
                return state.filter(todo => todo.id !== action.id)
            case TOGGLE_TODO:
                return state.map(todo => {
                    return (todo.id === action.id) ? { ...todo, completed: !todo.completed } : todo
                })
            default:
                return state
        }
    }

这会产生此错误: image error

但是当与这一行交换这一行时:

return state.filter(todo => todo.id !== action.id)

它工作正常,但动作相反。 thanx,有人可以向我演示一下。

编辑:

TodoDetailsS​​creen:

return state.filter(todo => todo.id === action.id)

1 个答案:

答案 0 :(得分:0)

我认为问题是此行:

const { id, text, details } = this.props.todos.find(todo => todo.id === this.props.navigation.getParam('id', ''))

每当find返回undefined时,它将引发错误。

将其更改为

const todo = this.props.todos.find(todo => todo.id === this.props.navigation.getParam('id', ''))

并在使用前检查该值是否存在。

如果todo不存在,则可以返回null。像这样

const todo = this.props.todos.find(todo => todo.id === this.props.navigation.getParam('id', ''))

if (!todo) { return null }

看看是不是问题所在。