1

大家好，我是新来的反应，我正在关注 Shaun Wassel 的反应教程之一。

我在哪里错过了问题。

我试图用谷歌搜索，但我想在这里发布的原因也是试图找到最接近我的问题的例子，并获得更多关于你的答案的想法，也许是对问题的深刻理解。

错误

31 | <div className="row my-5">
  32 |   <div className="col">
  33 |   <h1>{article.title}</h1>
> 34 |   <UpvotesSection articleName={name} upvotes={articleInfo.upvotes} setArticleInfo={setArticleInfo} />
     | ^  35 |   {article.content.map((paragraph, key) => (
  36 |     <p key={key}>{paragraph}</p>
  37 |   ))}

添加评论表格


const AddCommentForm = ({articleName, setArticleInfo}) => {

  const [username, setUsername] = useState('');
  const [commentText, setCommentText] = useState('');
  
  const addComment = async () => {
    const result = await fetch(`/api/articles/${articleName}/add-comment`, {
      method: 'post',
      body: JSON.stringify({username, text: commentText }),
      header: {
        'Content-Type': 'application/json',
      }
    });
    const body = await result.json();
    setArticleInfo(body);
    setUsername('');
    setCommentText('');
  }

  return (
    <div className="row">
      <div className="col-12">
        <h5>Add Comment</h5>
  
        <div class="form-group">
          <label for="name">Name: </label>
          <input className="form-control" id="name" type="text" value={username} onChange={(event) => setUsername(event.target.value)}></input>
        </div>
  
        <div class="form-group">
          <label for="comment">Comment: </label>
          <textarea class="form-control" id="comment" rows="3" spellcheck="false" value={commentText} onChange={(event) => setCommentText(event.target.value)}></textarea>
        </div>

        <button type="submit" className="btn btn-primary rounded-pill" onClick={() => addComment()}>Add Comment</button>
  
      </div>
    </div>
  );
}

export default AddCommentForm;

赞成票部分


const UpvotesSection = ({ articleName, upvotes, setArticleInfo }) => {
  const upvoteArticle = async () => {
    const result = await fetch(`/api/articles/${articleName}/upvote`, {
        method: 'post',
    });
    const body = await result.json();
    setArticleInfo(body);
  }
  return (
    <div>
      <button onClick={() => upvoteArticle()} className="btn btn-sm btn-primary rounded-pill mb-2">
        Add Upvote
      </button>
      <p>This post has been upvoted <span className="text-danger">{upvotes}</span> times.</p>
    </div>
  );
}

export default UpvotesSection;

文章页面.js

import React, {useState, useEffect} from 'react';
import ArticlesList from '../Components/ArticlesList';
import UpvotesSection from '../Components/UpvotesSection';
import CommentsList from '../Components/CommentsList';
import AddCommentForm from '../Components/AddCommentForm';
import NotFoundPage from './NotFoundPage';
import ArticleContent from './Article-Content';

const ArticlePage = ( {match}) => {
  const name = match.params.name;
  const article = ArticleContent.find(article => article.name === name);
      
  const [articleInfo, setArticleInfo] = useState({ upvotes: 0,  comments: [] });

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch(`/api/articles/${name}`);
      const body = await result.json();
      setArticleInfo(body);
    }
    fetchData();
  }, [name]);

  if (!article) return <NotFoundPage />  
    /** show similar blog  */
    const OtherArticles = ArticleContent.filter(article => article.name !== name );
    
    return (
    <>
      {/** article page */}  
      <div className="row my-5">
        <div className="col">
          <h1>{article.title}</h1>
          <UpvotesSection articleName={name} upvotes={articleInfo.upvotes} setArticleInfo={setArticleInfo} />
          {article.content.map((paragraph, key) => (
            <p key={key}>{paragraph}</p>
          ))}
        </div>
      </div>

      {/** comments */}   
      <div className="row my-5">
        <div className="col">
          <CommentsList comments={articleInfo.comments}/>
        </div>
      </div>

      {/** add comment */}   
      <div className="row my-5">
        <div className="col">
          <AddCommentForm articleName={name} setArticleInfo={setArticleInfo} />
        </div>
      </div>
      
      {/** other articles */}  
      <div className="row my-5">
        <div className="col">
          <h4>Other Articles</h4>
          <ArticlesList articles={OtherArticles} />
        </div>
      </div>
      
    </>
  )
}

export default ArticlePage;
4

0 回答 0