Ошибка типа: невозможно прочитать свойство 'title' из неопределенного * ошибка времени выполнения *

Question

Я пытаюсь получить заголовок и описание JSON данных из API для отображения на определенной странице

При переходе по ссылке на go на указанной странице также заголовок и описание отображаются ОК. На странице перезагрузки я получаю сообщение об ошибке: TypeError: Невозможно прочитать свойство 'title' из undefined.

Здесь я хочу, чтобы данные показывали DataShow.tsx:

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchBook } from '../../actions';

export const DataShow: React.FC = (props: any) => {
  useEffect(() => {
    async function asyncHook() {
      const { id } = props.match.params.id;
      await props.fetchBook(id)
      return
    }
    asyncHook();
 }, []);

  // if (!props.book) {
  //   return <div>Loading...</div>
  // }

  return (
      <div>
        <h1>{props.book.title}</h1>
        <h5>{props.book.description}</h5>
      </div>
    </div>
  );
}

const mapStateToProps = (state: any, ownProps?: any) => {
  return { book: state.books[ownProps.match.params.id] }
}

export default connect(mapStateToProps, { fetchBook })(DataShow);

Это мое ax ios функция fetchBook index.ts:

import { FETCH_BOOK } from './types';
import books from '../apis/books';

export const fetchBook = (id: string) => async (dispatch: any) => {
    const response = await book.get(`/books/${id}`);
    dispatch({ type: FETCH_BOOK, payload: response.data })
}

types.ts:

export const FETCH_BOOK = 'FETCH_BOOK';

books.ts:

import axios from 'axios';

export default axios.create({
  baseURL: 'http://localhost:3002/api/v1/'
});

Я пробовал пара вещей, таких как функция asyn c внутри хука 'useEffect', которая не работала, так что это не имеет значения, так как я получаю ту же ошибку, если она есть или нет.

Также я попробовал некоторые условные логи c (они закомментированы, как вы можете видеть), но он просто остается "загруженным ...", поскольку props.stream явно не определен.

Я уверен, что это не имеет никакого отношения к API, так как у меня есть несколько страниц, где это не проблема.

Это полная ошибка, которую я получаю при перезагрузке страницы:

×
TypeError: Cannot read property 'title' of undefined
DataShow
src/components/books/DataShow.tsx:62
  61 |   <div>
> 62 |     <h1>{props.book.title}</h1>
     | ^  63 |     <h5>{props.book.description}</h5>
  64 |   </div>
  65 | </div>

Эта ошибка отображается в консоли при щелчке по ссылке, и вы go переходите на запрошенную страницу, даже если данные (заголовок и описание) отображаются правильно:

GET http://localhost:3002/api/v1/books/undefined 404 (Not Found) xhr.js:178 

Спасибо

Answer 1

Вы можете проверить объект книги.

{props && Object.keys(props.book).length>0 ? 
  <div>
    <h1>{props.book.title}</h1>
    <h5>{props.book.description}</h5>
  </div>:
  <div>
    <p>No book found..</p> 
  </div>
}

Answer 2

props.book?.title
props.boon?.description

ваш метод Return реакции запускается перед приходом реквизита, поэтому используйте его для удержания, пока реквизиты пришли, или вы также можете использовать старый метод props.book && props.book.title