如何使用 React 动态渲染所有用户 post 图像？

Question

我试图在我的 Discover 组件中使用 React 在我的 Web 应用程序中呈现所有用户帖子图像。我该怎么做呢？这是对象在 JSON:

中的样子

这是我目前在发现组件中的内容。

Discover.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，但我不确定该怎么做。感谢任何帮助，谢谢！

Answer 1

由于要渲染所有post，所以需要将数据数组存储在你的状态中。然后您可以映射状态以呈现所有 posts.

我创建了一个名为 posts 的状态。我从响应中获取数据数组并将其存储在 posts 状态。现在我映射 posts 状态并渲染每个 post 图像。

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;

如何使用 React 动态渲染所有用户 post 图像？

How can I dynamically render all user post images with React?

javascript

image

reactjs

react-hooks