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

Question

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

当点击链接进入该页面时，标题和描述会显示 OK。在页面重新加载时出现错误：TypeError: Cannot read property 'title' of 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);

这是我的 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”钩子中的异步函数，但它不起作用，所以它并没有真正的区别，因为无论是否存在相同的错误，我都会得到相同的错误。

我还尝试了一些条件逻辑（如您所见，它已被注释掉）但它只是停留在“正在加载...”，因为 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

你的 Return 方法在道具到来之前运行，所以在道具到来时使用它来保持 或者你也可以使用旧方法 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>
}