Question

import {deleteTodo} from "../actions/todos";

@connect(store => {
    return {
        todos: store.todos.todos,
    }
})
class ViewTodo extends React.Component{
    handleDelete(id){
        this.props.history.goBack();
        //even if the deleteTodo() method is after the goBack(), it still throws error
        this.props.dispatch(deleteTodo(id));
    }
    render(){
        const todo = this.props.todos.filter(e => parseInt(this.props.match.params.id) === e.id)[0];
        return (
            <div>
                <TodoDeleteButton
                    onDelete={() => this.handleDelete(todo.id)}
                />

                <h2>{todo.title}</h2>

当删除当前的todo元素时，react正在尝试呈现新的{todo.title}但是todo元素丢失并且它会抛出错误。有什么方法可以避免这种情况吗？

Answer 1

您可以使用：

todo.title ? todo.title : ''

这样，如果有标题，它会尝试加载它，否则它只会加载一个空的h2元素。

在redux删除后反应未定义的项目

1 个答案: