[英]TypeError: Cannot read property 'title' of undefined *runtime error*
When a link is clicked to go too said page the title and description shows OK.当单击指向 go 的链接时,该页面的标题和说明也会显示 OK。 On page reload I get the error: TypeError: Cannot read property 'title' of undefined.
在页面重新加载时出现错误:TypeError:无法读取未定义的属性“标题”。
This is where I want the data to show DataShow.tsx:这是我希望数据显示 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);
This is my axios function fetchBook index.ts:这是我的 axios function 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:类型.ts:
export const FETCH_BOOK = 'FETCH_BOOK';
books.ts:书籍.ts:
import axios from 'axios';
export default axios.create({
baseURL: 'http://localhost:3002/api/v1/'
});
I've tried a couple of things like the async function inside the 'useEffect' hook which didn't work so it doesn't really make a difference as I get the same error if its there or not.我已经尝试了一些方法,例如“useEffect”钩子中的异步 function 不起作用,所以它并没有真正的区别,因为无论是否存在相同的错误,我都会得到相同的错误。
Also i've tried some conditional logic (it's commented out as you can see) but it just stays on 'loading...' as props.stream is obviously undefined.此外,我尝试了一些条件逻辑(如您所见,它已被注释掉),但它只是停留在“正在加载...”,因为 props.stream 显然是未定义的。
I'm certain it has nothing to do with the api as I have multiple pages where this is not an issue.我确定它与 api 无关,因为我有多个页面,这不是问题。
This is the full error I get when the page reloads:这是页面重新加载时我得到的完整错误:
×
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>
This error is displayed is the console when the link is clicked and you go to the requested page even though the data (title and description) is showing correctly:当点击链接并且您 go 到请求的页面时,即使数据(标题和描述)正确显示,此错误也会显示为控制台:
GET http://localhost:3002/api/v1/books/undefined 404 (Not Found) xhr.js:178
Thanks谢谢
props.book?.title props.boon?.description
your Return method of react running before coming props so use this to hold while props came or you can also use old method props.book&&props.book.title你的 Return 方法在道具到来之前运行,所以在道具到来时使用它来保持,或者你也可以使用旧方法props.book&&props.book.title
You can check for book object.您可以查看书籍 object。
{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>
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.