react-native与redux deleteTodo操作错误

Question

I'm new to react native and learning with this simple TodoApp. Strange behavior happening when trying to delete a Todo from redux state.

This is my todosReducer code:

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

when in deleteTodo case using

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

This produce this error: image error

but when exchange this line with this one:

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

it works fine but with the opposite action. Can someone demonstrate this to me, thanx.

Edited:

TodoDetailsScreen:

import React from 'react'
import { StyleSheet, Alert } from 'react-native'
import { Container, Content, Text, Grid, Col, Item, Input, Icon, Button } from 'native-base'
import { connect } from 'react-redux'

import { editTodo, deleteTodo, addTodo } from '../redux/actions/todosActions';
import HeaderComponent from '../components/HeaderComponent'



class TodoDetailsScreen extends React.Component {
    static navigationOptions = ({ navigation }) => {
        return {
            headerTitle: <HeaderComponent />,
            headerRight: <Button transparent onPress={navigation.state.params.onDeletePress}>
                <Icon name='delete' type='MaterialIcons' style={{ color: 'black' }} /></Button>,
        }
    }

    onDeletePress = () => {
        this.props.deleteTodo(this.props.navigation.getParam('id', ''))
        this.props.navigation.navigate('Todos')
    }

    componentDidMount() {
        this.props.navigation.setParams({ onDeletePress: this.onDeletePress })
    }

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

        return (
            <Container>
                {/* Content Begin */}
                <Content>
                    <Grid>
                        <Col style={styles.col} size={100}>
                            <Text style={styles.text}>{text}</Text>
                            <Item style={{ borderColor: 'transparent' }}>
                                <Icon active name='md-list' type='Ionicons' />
                                <Input underlineColorAndroid={'transparent'} multiline={true} placeholder='Add details'
                                    value={details} onChangeText={(details) => this.props.editTodo(id, text, details)} />
                            </Item>
                        </Col>
                    </Grid>
                </Content>
                {/* Content End */}
            </Container>
        )
    }
}

const styles = StyleSheet.create({
    col: {
        padding: 15,
    },
    text: {
        fontSize: 25,
        fontWeight: '500',
        marginBottom: 20,
    },
})

mapStateToProps = state => ({
    todos: state.todos,
})

mapDispatchToProps = dispatch => ({
    editTodo: (id, text, details) => dispatch(editTodo(id, text, details)),
    deleteTodo: id => dispatch(deleteTodo(id)),
    addTodo: (text, details) => dispatch(addTodo(text, details)),
})

export default connect(mapStateToProps, mapDispatchToProps)(TodoDetailsScreen)

Answer 1

I think the problem is this line:

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

It throws an error whenever find returns undefined .

Change it to

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

and check if the value exists before using it.

You could return a null in case todo doesnt exist. Like so

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

if (!todo) { return null }

to see if thats the problem.