Javascript TypeError:无法读取属性'；标题'；未定义的*运行时错误* 我试图从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);

类型.ts：

export const FETCH_BOOK = 'FETCH_BOOK';

books.ts：

import axios from 'axios';

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

我已经尝试了一些东西，比如“useffect”钩子中的异步函数，但它不起作用，所以它并没有真正起作用，因为无论是否存在，我都会遇到相同的错误

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

谢谢

props.book？书名
props.boon？.description

您可以检查图书对象

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

{props&&Object.keys（props.book）.length>0？
{props.book.title}
{props.book.description}
:
未找到任何书籍。

}

实际问题us props.book未定义，请取消行下的注释并检查，

//如果（！props.book）{//返回加载…//}

请确保props.book包含一些数据，然后它将工作。您需要向组件添加加载程序。这只是一个布尔值。在调用API之前将其设置为true，然后在响应之后将其设置为false。使用该布尔值来显示和隐藏我在帖子中提到的顶部divas，如果没有注释，那么页面只会在控制台

xhr.js:178 GET中显示“Loading…”http://localhost:3002/api/v1/books/undefined 404（未找到）

console.log（props.book）VM557:1未捕获引用错误：在：1:13未定义道具，但在尝试重新加载前首次单击链接时，数据仍在显示。错误：无法将未定义或null转换为对象

不幸的是，您是否初始化了book={}之类的book对象？请检查响应。数据不是空的或对象。然后将其分配到book状态

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

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