Question

你好，我是一名前端开发人员，已经在这个领域工作了不到一年。

我正在进行一个博客项目来学习 React。

但是，中途出现了以下错误。

我已经花费了很长时间来解决这个问题，但是我就是找不到答案。

除此之外还有许多其他的文件，但是我认为最可能导致错误的代码如下所示。

非常感谢你们的帮助。


import React, { useEffect, Fragment } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Helmet } from "react-helmet";
import {
 POST_DETAIL_LOADING_REQUEST,
 POST_DELETE_REQUEST,
 USER_LOADING_REQUEST,
 POST_DETAIL_LOADING_SUCCESS,
 POST_DETAIL_LOADING_FAILURE,
} from "../../redux/types";
import { Button, Row, Col, Container } from "reactstrap";
import { Link } from "react-router-dom";
import CKEditor from "@ckeditor/ckeditor5-react";
import GrowingSpinner from "../../components/spinner/Spinner";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
 faPencilAlt,
 faCommentDots,
 faMouse,
} from "@fortawesome/free-solid-svg-icons";
import BalloonEditor from "@ckeditor/ckeditor5-editor-balloon/src/ballooneditor";
import { editorConfiguration } from "../../components/editor/EditorConfig";
import Comments from "../../components/comments/Comments";

const PostDetail = (req) => {
 const dispatch = useDispatch();
 const { postDetail, creatorId, title, loading } = useSelector(
   (state) => state.post
 );
 const { userId, userName } = useSelector((state) => state.auth);
 const { comments } = useSelector((state) => state.comment);

 console.log(req);
 useEffect(() => {
   dispatch({
     type: POST_DETAIL_LOADING_REQUEST,
     payload: req.match.params.id,
   });
   dispatch({
     type: USER_LOADING_REQUEST,
     payload: localStorage.getItem("token"),
   });
 }, [dispatch, req.match.params.id]);

 const onDeleteClick = () => {
   dispatch({
     type: POST_DELETE_REQUEST,
     payload: {
       id: req.match.params.id,
       token: localStorage.getItem("token"),
     },
   });
 };

 const EditButton = (
   <Fragment>
     <Row className="d-flex justify-content-center pb-3">
       <Col className="col-md-3 mr-md-3">
         <Link to="/" className="btn btn-primary btn-block">
           Home
         </Link>
       </Col>
       <Col className="col-md-3 mr-md-3">
         <Link
           to={`/post/${req.match.params.id}/edit`}
           className="btn btn-success btn-block"
         >
           Edit Post
         </Link>
       </Col>
       <Col className="col-md-3">
         <Button className="btn-block btn-danger" onClick={onDeleteClick}>
           Delete
         </Button>
       </Col>
     </Row>
   </Fragment>
 );

 const HomeButton = (
   <Fragment>
     <Row className="d-flex justify-content-center pb-3">
       <Col className="col-sm-12 com-md-3">
         <Link to="/" className="btn btn-primary btn-block">
           Home
         </Link>
       </Col>
     </Row>
   </Fragment>
 );

 const Body = (
   <>
     {userId === creatorId ? EditButton : HomeButton}
     <Row className="border-bottom border-top border-primary p-3 mb-3 d-flex justify-content-between">
       {(() => {
         if (postDetail && postDetail.creator) {
           return (
             <Fragment>
               <div className="font-weight-bold text-big">
                 <span className="mr-3">
                   <Button color="info">
                     {postDetail.category.categoryName}
                   </Button>
                 </span>
                 {postDetail.title}
               </div>
               <div className="align-self-end">{postDetail.creator.name}</div>
             </Fragment>
           );
         }
       })()}
     </Row>
     {postDetail && postDetail.comments ? (
       <Fragment>
         <div className="d-flex justify-content-end align-items-baseline small">
           <FontAwesomeIcon icon={faPencilAlt} />
           &nbsp;
           <span> {postDetail.date}</span>
           &nbsp;&nbsp;
           <FontAwesomeIcon icon={faCommentDots} />
           &nbsp;
           <span>{postDetail.comments.length}</span>
           &nbsp;&nbsp;
           <FontAwesomeIcon icon={faMouse} />
           <span>{postDetail.views}</span>
         </div>
         <Row className="mb-3">
           <CKEditor
             editor={BalloonEditor}
             data={postDetail.contents}
             config={editorConfiguration}
             disabled="true"
           />
         </Row>
         <Row>
           <Container className="mb-3 border border-blue rounded">
             {Array.isArray(comments)
               ? comments.map(
                   ({ contents, creator, date, _id, creatorName }) => (
                     <div key={_id}>
                       <Row className="justify-content-between p-2">
                         <div className="font-weight-bold">
                           {creatorName ? creatorName : creator}
                         </div>
                         <div className="text-small">
                           <span className="font-weight-bold">
                             {date.split[0]}
                           </span>
                           <span className="font-weight-light">

                             {date.split[1]}
                           </span>
                         </div>
                       </Row>
                       <Row className="p-2">
                         <div>{contents}</div>
                       </Row>
                       <hr />
                     </div>
                   )
                 )
               : "Creator"}
             <Comments
               id={req.match.params.id}
               userId={userId}
               userName={userName}
             />
           </Container>
         </Row>
       </Fragment>
     ) : (
       <h1>hi</h1>
     )}
   </>
 );

 console.log(comments, "Comments");
 return (
   <div>
     <Helmet title={`Post | ${title}`} />
     {loading === true ? GrowingSpinner : Body}
   </div>
 );
};

export default PostDetail;

即使您写了上面的语法，标题值也无法输出。

enter image description here

结构如下：

(postWrite) -> 编写帖子 + 点击按钮 -> _保存帖子 + 移动到帖子详细页面 (错误)

+) 代码非常长，但是我无法突出显示它。对我而言，我不知道这个文件中哪部分是问题所在......

Answer 1

通过查看代码和错误消息，似乎没有发现导出组件的问题。相反，您可能正在使用不正确的导入方式导致问题。

export default PostDetail

这意味着您需要使用以下语法来导入组件：

import PostDetail from './path-to-component'

React - 未捕获的错误：元素类型无效。

1 个答案: