TypeError：无法读取未定义的属性“标题” *运行时错误*

Question

我正在尝试从api获取标题和描述JSON数据以显示在特定页面上

单击链接也可以转到该页面时，标题和说明显示为OK。在页面重新加载时，出现错误：TypeError：无法读取未定义的属性“ title”。

这是我希望数据显示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);

这是我的axios函数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/'
});

我已经尝试了诸如“ useEffect”钩子中的async函数之类的几项操作，该功能无法正常工作，因此它并没有真正的区别，因为无论是否存在同样的错误，我都会得到它。

我也尝试了一些条件逻辑（如您所见，已经注释掉了），但是由于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>

单击链接后，即使数据（标题和描述）正确显示，也会在控制台上显示此错误：

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

谢谢

Answer 1

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

React的返回方法在道具来临之前运行，因此在道具来临时使用此方法来保持 或者您也可以使用旧方法 props.book && props.book.title

Answer 2

您可以检查书籍对象。

{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>
}