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

【问题标题】：React undefined item after redux delete在 redux 删除后反应未定义的项目
【发布时间】：2018-03-03 23:45:42
【问题描述】：

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 元素丢失并抛出错误。有什么办法可以避免吗？

【问题讨论】：

标签： reactjs redux react-router react-router-redux

【解决方案1】：

你可以使用：

todo.title ? todo.title : ''

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

【讨论】：