[英]why does this array throw an error when useState has default values
我試圖弄清楚為什么這段代碼在嘗試獲取數組的長度時會拋出錯誤，甚至在嘗試在 JSX 上渲染時也會拋出相同的錯誤。
為什么狀態 [postData] 在發送獲取請求以使用新數據更新它之前不使用默認值？
幾乎，我希望我的初始數據是默認的，直到我發送請求或使用 setPostData(dataRequest)。 我究竟做錯了什么？ 謝謝
錯誤：ViewPost.js：31 未捕獲類型錯誤：無法讀取未定義的屬性（讀取“長度”）
import React, { useEffect, useState, useContext } from 'react';
import { useParams, Link } from 'react-router-dom';
import Axios from 'axios';
import StateContext from '../StateContext';
import NotFound from './NotFound';
import iconSet from '../selection.json';
import IcomoonReact, { iconList } from 'icomoon-react';
function ViewPost() {
const { id } = useParams();
const [postData, setPostData] = useState([
{
_id: '...',
username: '...',
avatar: '...',
date: '...',
text: '...',
image: '...',
likes: [],
hearts: [],
retweet: [],
user: '...',
isFollowing: 'false',
isVerified: 'false',
comments: [{ test: 'test' }],
name: '...',
surname: '...',
},
]);
console.log(postData.comments.length) // throws an error here
const [isLoading, setIsLoading] = useState(true);
const appState = useContext(StateContext);
useEffect(() => {
async function fetchData() {
try {
const res = await Axios.get(`http://localhost:2000/api/status/${id}`);
console.log(res.data);
if (res.data) {
setPostData(res.data);
setIsLoading(false);
} else {
setIsLoading(true);
}
} catch (e) {
console.log(e.message);
}
}
fetchData();
}, [id]);
return (
<main className="main-view">
{isLoading ? (
'Loading...'
) : (
<div>
<div className="main-view__user-feed viewpost">
<div className="main-view__user-feed__author viewpost__redone">
<div className="viewpost__name">
<img
src={postData.avatar}
alt="image tweet"
className="img__viewpost"
></img>
</div>
<h2 className="viewpost__name__surname">
{postData.name} {postData.surname}
</h2>
<Link
to={`/${postData.username}`}
className="username__author__viewpost"
>
@{postData.username}
</Link>
<a href="#" className="author_post__viewpost">
{postData.text}
</a>
<div className="author__stats">
<a href="#">
<span>{postData.retweet}</span> Retweets
</a>
<a href="#">
<span>{postData.likes}</span> Likes
</a>
<a href="#">
<span>{postData.retweet}</span> Quote Tweets
</a>
</div>
<div className="icons__viewpost">
<section>
<li className="top-nav__item top-nav__item--active">
<Link to="/" className="top-nav__link">
<IcomoonReact
className="top-nav__icon"
iconSet={iconSet}
color="ffffff"
size={20}
icon="bubble2"
/>
<span>0</span>
</Link>
</li>
</section>
<section>
<li className="top-nav__item top-nav__item--active">
<a href="#" className="top-nav__link">
<IcomoonReact
className="top-nav__icon"
iconSet={iconSet}
color="ffffff"
size={20}
icon="loop2"
/>
<span>3</span>
</a>
</li>
</section>
<section>
<li className="top-nav__item top-nav__item--active">
<Link to="/" className="top-nav__link">
<IcomoonReact
className="top-nav__icon"
iconSet={iconSet}
color="ffffff"
size={20}
icon="heart"
/>
<span>2</span>
</Link>
</li>
</section>
<section>
<li className="top-nav__item top-nav__item--active">
<a href="#" className="top-nav__link">
<IcomoonReact
className="top-nav__icon"
iconSet={iconSet}
color="ffffff"
size={20}
icon="books"
/>
</a>
</li>
</section>
</div>
</div>
</div>
<div className="main-view__user-tweet viewpost__textarea">
<img src={appState.user.avatar} alt="image tweet" />
<form action="#" className="main-view__user-tweet__search">
<textarea
maxlength="250"
id="textBox1"
name="content"
TextMode="MultiLine"
className="main-view__user-tweet__input"
onkeyup="setHeight('textBox1');"
onkeydown="setHeight('textBox1');"
placeholder="Tweet your reply"
></textarea>
</form>
<a href="#" className="main-view__user-tweet__button">
Reply
</a>
</div>
</div>
)}
{isLoading
? 'Loading...'
: postData.comments.map((comment) => {
return (
<div className="main-view__user-feed">
<img src={comment.avatar} alt="image tweet"></img>
<div className="main-view__user-feed__author">
<div className="name">
<h2>
{comment.name} {comment.surname}
</h2>
<Link
to={`/${comment.username}`}
className="username__author"
>
@{comment.username}
</Link>
</div>
<p className="reply-p">
Replying to <a href="">@{postData.username}</a>
</p>
<a href="#" className="author_post">
{comment.text}
</a>
<div className="icons">
<section>
<li className="top-nav__item top-nav__item--active">
<a href="#" className="top-nav__link">
<svg className="top-nav__icon">
<use xlinkHref="img/sprite.svg#icon-bubble2"></use>
</svg>
<span>0</span>
</a>
</li>
</section>
<section>
<li className="top-nav__item top-nav__item--active">
<a href="#" className="top-nav__link">
<svg className="top-nav__icon">
<use xlinkHref="img/sprite.svg#icon-loop2"></use>
</svg>
<span>0</span>
</a>
</li>
</section>
<section>
<li className="top-nav__item top-nav__item--active">
<a href="#" className="top-nav__link">
<svg className="top-nav__icon">
<use xlinkHref="img/sprite.svg#icon-heart"></use>
</svg>
<span>0</span>
</a>
</li>
</section>
<section>
<li className="top-nav__item top-nav__item--active">
<a href="#" className="top-nav__link">
<svg className="top-nav__icon">
<use xlinkHref="img/sprite.svg#icon-books"></use>
</svg>
</a>
</li>
</section>
</div>
</div>
</div>
);
})}
</main>
);
}
export default ViewPost;
未捕獲的類型錯誤：無法讀取未定義的屬性（讀取“長度”）
您的問題在於您正在閱讀postData.comments.length 。 通過設置數組的方式，您將改為閱讀postData[0].comments.length ，因為它是一個內部包含對象的數組。 為了簡化事情，您可以更正初始值：
const [postData, setPostData] = useState({
_id: '...',
username: '...',
avatar: '...',
date: '...',
text: '...',
image: '...',
likes: [],
hearts: [],
retweet: [],
user: '...',
isFollowing: 'false',
isVerified: 'false',
comments: [{ test: 'test' }],
name: '...',
surname: '...',
});
為什么在使用 .includes 在數組中搜索字符串時 TypeScript 會拋出錯誤？
[英]Why does TypeScript throw an error when searching for a string in an array with .includes?
為什么在瀏覽器中運行 expo 應用程序時導出默認會引發錯誤？
[英]Why does export default throw an error when running expo app in browser?
ab < 0，為什么在ab === undefined時不會拋出錯誤？
[英]a.b < 0, why does this not throw an error when a.b === undefined?
為什么 datetime.strptime 在使用 Django 運行時會拋出錯誤？
[英]Why does datetime.strptime throw an error when run with Django?
為什么這個函數在使用includes方法的時候會報錯？
[英]Why does this function throw an error when using the includes method?
當 function 參數類型不匹配時，為什么 TypeScript 不拋出錯誤？
[英]Why does TypeScript not throw an error when the function argument type is mismatched?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.