Method .map在尝试呈现每个元素时不是一个函数

Question

我试图在数组上使用。map方法，我得到错误"tweetsData。Map不是函数

我已经创建了一个const [tweetsData, setTweetsData] = useState([])的状态，并且在前端，它输出为tweetsData。Map不是函数

尝试设置多种不同的方式，仍然不起作用，在这一点上，这有点令人沮丧。

import React, { useEffect, useContext, useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import Axios from 'axios';
import StateContext from '../StateContext';
function Profile() {
const appState = useContext(StateContext);
const { username } = useParams();
const [profileData, setProfileData] = useState({
username: '...',
name: '...',
surname: '...',
avatar: 'https://gravatar.com/avatar/placeholder?s=128',
isFollowing: false,
isVerified: false,
profileCounts: { postCount: '', followerCount: '', followingCount: '' },
});


// HERE -> I declared the array and trying to use the .math method.
const [tweetsData, setTweetsData] = useState([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
async function fetchData() {
try {
const res = await Axios.post(
`http://localhost:2000/api/profile/${username}`,
config
);
const { posts, userProfile } = res.data;
setProfileData({
username: userProfile[0].username,
name: userProfile[0].name,
surname: userProfile[0].surname,
avatar: userProfile[0].avatar,
isFollowing: userProfile[0].isFollowing,
isVerified: userProfile[0].isVerified,
profileCounts: userProfile[0].profileCounts,
});
setTweetsData({
posts,
...posts,
});
console.log(tweetsData);
setIsLoading(false);
} catch (e) {
console.log(e.message);
}
}
fetchData();
}, []);
return (

// here trying to render a div for every element.
{tweetsData.map((post) => {
return (
<div className="main-view__user-feed">
<img src="./img/8.jpeg" alt="image tweet"></img>
<div className="main-view__user-feed__author">
<div className="name">
<h2>
{post.name} {post.surname}
</h2>
<a href="#" className="username__author">
@{post.username}
</a>
<span> 9 June</span>
</div>
<a href="/ViewPost.html" className="author_post-viewpost">
{post.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>3</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>4</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>25</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 Profile;

Answer 1

你收到的错误是因为posts不是一个数组，你的代码证明，因为你设置它等于一个对象{}和map只对数组工作，所以从此错误

setTweetsData({posts, ...posts});

将代码改为

setTweetsData(posts);

Answer 2

你可以在try render tweetsData中使用可选的链接

{tweetsData?.map((post) => {
//code)}