调用API id时出现问题

Question

嗨，我在弄清楚如何访问id时遇到了一些问题。我正在制作一个twitter克隆器，我有一个图标，我想点击它，看看人们对它的评论。但我遇到了麻烦，无法弄清楚点击聊天气泡时如何访问id。如有任何帮助，我们将不胜感激。API运行得很好，我可以通过邮递员呼叫id。

const GetData = (id) => {
axios.get('https://localhost:44368/api/users/{id}').then((response) => {
console.log(response.data, "list of heroes  ");
});
};
return (
<div className="post">
<div className="ppictur">
<Avatar src={avatar} />
</div>
<div className="post_body">
<div className="post_header">
<div className="post_headerText">
<h3>
{displayName}
<span className="post_headerSpecial">
<VerifiedIcon className="post_badge" />
@{username}
</span>
</h3>
</div>
<div className="post_headerDesription">
<p>{text}</p>
</div>
</div>
<img src={image} alt="" />
<div className="post_footer">
<ChatBubbleOutlineIcon onClick={GetData()} />
<RepeatIcon fontSize="small" />
<FavoriteBorderIcon fontSize="small" />
<PublishOutlinedIcon fontSize="small" />
</div>
</div>
</div>
);
}
export default Post;

const [posts, setPosts] = useState([]);
useEffect(() => {
axios.get('https://localhost:44368/api/users').then((response) => {
console.log(response.data, "list of heroes  ");
setPosts(response.data);
});
}, []);
const icon = document.getElementById("Dark");
function DarkM() {
document.body.classList.toggle("dark-theme");
}
return (
<div className="commentbox">
<div className="header">
<h2>Home</h2>
<DarkModeOutlinedIcon id="Dark" onClick={() => DarkM(icon)} />
</div>
<Opinion />
{posts.map(post => (
<Post
avatar={post.profilePicture}
displayName={post.name}
username={post.userName}
text={post.post}
image={post.image}
bull 
/>
)).reverse()}
</div>
);
}
export default Feed; ```

Answer 1

使用带有倒勾号的模板文字ES6。

const GetData = (id) => {
axios.get(`https://localhost:44368/api/users/${id}`).then((response) => {
console.log(response.data, "list of heroes  ");
});
};

此外，当您调用它时，请确保传递参数。

<ChatBubbleOutlineIcon onClick={GetData(9)} />

Answer 2

在我的另一个组件中，我没有推送所有数据。那是我的道具不知道我想叫什么

const objectToPass = {
postId, avatar, displayName, username, text, image
}
const showSingleData = (value) => {
navigate(`/tweet/${value.postId}`)
console.log(value)
}``` 
it was a problem with my other component