React- 从 JSON 服务器获取数据并在卡片内显示

问题描述

我正在尝试使用 json 服务器（获取、发布、删除）创建一个简单的博客网站。在主页中，正文组件将显示每个博客文章的标题、图片和文章的几行，点击后将显示完整的文章。它将类似于这张图片。

我在 Bootstrap 5 和 4 中使用 Material Design，我从那里找到了这个组件，但是从 posts.map 函数中它不起作用。 这就是我想要实现的-

这是我的代码的输出-

这是我的代码

import React,{ useState,useEffect } from 'react';
import {
  MDbrow,MDBCol,MDBCard,MDBCardBody,MDBMask,MDBIcon,MDBView,MDBBtn,} from 'mdbreact';
import axios from 'axios';


const Body = () => {
  const [posts,setPost] = useState([]);

  useEffect(() => {
    loadData();
  },[]);

  const loadData = async () => {
    const result = await axios.get('http://localhost:3001/post');
    setPost(result.data);
  };

  return (
    <MDBCard className='my-5 px-5 pb-5'>
      <MDBCardBody>
        <h2 className='h1-responsive font-weight-bold text-center my-5'>
          Recent posts
        </h2>

> /// map from json server to show the data inside of MDbrow component ///

        {posts.map((post,index) => {
          <MDbrow>
            <MDBCol lg='5' xl='4'>
              <MDBView hover className='rounded z-depth-1-half mb-lg-0 mb-4'>
                <img
                  className='img-fluid'
                  src='https://mdbootstrap.com/img/Photos/Others/images/49.jpg'
                  alt=''
                />
                <a href='#!'>
                  <MDBMask overlay='white-slight' />
                </a>
              </MDBView>
            </MDBCol>
            <MDBCol lg='7' xl='8'>
              <h3 className='font-weight-bold mb-3 p-0'>
                <strong>{post.title}</strong>
              </h3>
              <p className='dark-grey-text'>{post.body}</p>
              <p>
                by{' '}
                <a href='#!' className='font-weight-bold'>
                  Jessica Clark
                </a>,19/04/2018
                <MDBBtn tag='a'>
                  <i
                    class='fas fa-edit'
                    size='lg'
                    style={{ color: 'blue' }}></i>
                </MDBBtn>
                <MDBBtn tag='a'>
                  <i
                    class='fas fa-trash-alt'
                    size='lg'
                    style={{ color: 'red' }}></i>
                </MDBBtn>
              </p>
              <MDBBtn color='primary' size='md'>
                Read More
              </MDBBtn>
              <MDBBtn color='danger' size='sm'>
                Delete
              </MDBBtn>
            </MDBCol>
          </MDbrow>;
        })}
        <hr className='my-5' />
      </MDBCardBody>
    </MDBCard>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）