我正在嘗試使用Discover組件中的 React 在我的 Web 應用程式中呈現所有用戶發布的影像。我該怎么做呢？這是物件在 JSON 中的樣子：
這就是我目前在發現組件中的內容。
發現.jsx：
import React, {useState, useEffect} from 'react';
import {Link} from 'react-router-dom';
import {useSelector} from 'react-redux';
import UserPostsService from '../../services/user-post.service';
import './styles/Discover.css';
const Discover = () => {
const [content, setContent] = useState('');
const [photoURL, setPhotoURL] = useState('/images/user-solid.jpeg');
useEffect(() => {
UserPostsService.getAllPosts().then(
(response) => {
if (response.data.postImage)
setPhotoURL(response.data.post_img_complete);
},
(error) => {
const _content =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
setContent(_content);
}
);
}, []);
return (
<div className='page'>
<div className='user-post'>
<img src={photoURL} alt='User-Post' className='post'></img>
</div>
</div>
);
};
export default Discover;我需要以某種方式渲染每個 post_img_complete，但我不知道該怎么做。任何幫助表示贊賞，謝謝！
uj5u.com熱心網友回復：
由于您要呈現所有帖子，因此您需要將資料陣列存盤在您的狀態中。然后您可以映射狀態以呈現所有帖子。
我創建了一個名為posts. 我從回應中獲取資料陣列并將其存盤在posts狀態中。現在我映射posts狀態并渲染每個帖子影像。
import React, {useState, useEffect} from 'react';
import {Link} from 'react-router-dom';
import {useSelector} from 'react-redux';
import UserPostsService from '../../services/user-post.service';
import './styles/Discover.css';
const Discover = () => {
const [content, setContent] = useState('');
// const [photoURL, setPhotoURL] = useState('/images/user-solid.jpeg');
const [posts, setPosts]=useState([]);
useEffect(() => {
UserPostsService.getAllPosts().then(
(response) => {
if (response.data) setPosts(response.data)
},
(error) => {
const _content =
(error.response &&
error.response.data &&
error.response.data.message) ||
error.message ||
error.toString();
setContent(_content);
}
);
}, []);
return (
<div className='page'>
{posts.map((post)=>(
<div className='user-post'>
<img src={post.post_img_complete} alt='User-Post' className='post'/>
</div>
))}
</div>
);
};
export default Discover;
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/462689.html
標籤：javascript 反应 图片 反应钩子
上一篇：試圖從極坐標圖片中裁剪出中心圓