Не удается прочитать свойство 'id' из неопределенного при создании задачи в NewTodo.jsx

Question

Я пытаюсь создать новую задачу, и передачей todo является создание идентификатора для перенаправления компонента, но у меня возникла следующая проблема: «Невозможно прочитать свойство« id »из undefined». Это NewTodo.jsx, когда это ошибка:

  class NewTodo extends Component {
    state = {
      redirect: false
    };

   componentDidMount() {
      this.props.newTodo();
     }

     submit = todo => {
           return this.props
            .saveTodo(todo)
            .then(response => this.setState({ redirect: true }))
            .catch(err => {
               throw new SubmissionError(this.props.errors);
           });
    };

      render() {
         return (
          <div>
           <h2>New Todo</h2>

            {this.state.redirect ? (
               <Redirect to={
     //ERROR            {pathname:`/todos/${this.props.location.state.id}/watch`,

    //ERROR             state: {id: this.props.todo._id}}
                }
               />
           ) : (
              <TodoForm todo={this.props.todo} onSubmit={this.submit} />
           )}
          </div>
        );
     }
   }

   function mapStateToProps(state) {
     return {
         todo: state.todosDs.todo,
         errors: state.todosDs.errors
     };
    }

  export default connect(
     mapStateToProps,
    { newTodo, saveTodo }
   )(NewTodo);

В строках, когда говорят ERROR, кажется, что я передаю неопределенное значение id. Как я могу получить доступ к идентификатору todo, который я создаю на данный момент?

Ожидаемый результат - '/ todos / 8eqwnhwebewj / watch', но реальный вывод - это следующая проблема:

Не удается прочитать свойство ' id 'из неопределенного

Answer 1

Похоже, вы не связываете идентификатор с правильным объектом:

это должно быть это параметр запроса this.props.location.search.id не this.props.location.state.id

это должно быть именно оно например, /path/:id -> this.props.location.match..id не this.props.location.state.id

  <Redirect to={`/todos/${this.props.todo._id}/watch`}      }
  />
) : (
    <TodoForm todo={this.props.todo} onSubmit={this.submit} />

В вашем случае вам нужно перенаправить на путь следующим образом:

/todos/${this.props.todo._id}/watch

Answer 2

, если вы используете react-router-dom, и это не тот компонент, который визуализируется непосредственно в маршруте, попробуйте использовать withRouter, чтобы получить history, location и match в качестве реквизитов в вашем компоненте.

withRouter предоставит react-router-dom реквизитов в ваш компонент.

api здесь