react-native - react-native with redux deleteTodo 动作错误

Question

我是使用这个简单的 TodoApp 做出本机反应和学习的新手。尝试从 redux 状态中删除 Todo 时发生奇怪的行为。

这是我的 todosReducer 代码：

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

在 deleteTodo 情况下使用时

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

这会产生此错误： 图像错误

但是当用这条线交换这条线时：

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

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

编辑：

TodoDetailsS​​creen:

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)

标签： react-nativeredux

Answer 1

我认为问题在于这一行：

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 }

看看这是否是问题所在。