redux 삭제 후 정의되지 않은 항목에 대응

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.title}을 렌더링하려고 시도하지만 todo 요소가 누락되어 오류가 발생합니다. 이것을 피할 수있는 방법이 있습니까?

Answer 1

당신은 사용할 수 있습니다

todo.title ? todo.title : '' 

이 방법은 그것을 시도하고 그것을로드 제목이있는 경우, 그렇지 않으면 그냥 빈 H2 요소를로드합니다.