为什么评论不会立即出现在我的 React 应用项目中？

如何解决为什么评论不会立即出现在我的 React 应用项目中？

我正在开发我的第一个 React 应用程序，但在尝试为博客创建评论部分时遇到了困难。每当我在帖子下发表评论时，它不会立即出现，而是在我刷新或返回页面后出现。 在我的控制台中，它们确实会立即出现。 谁能帮我解决这个问题？

评论添加

function CommentAdd(props) {

    const {handleCommentSubmit} = props;

    const [comment,setComment] = useState('');

    return (
        <div>
            <div className="card mt-4 mb-3">
                <div className="card-header"><strong>Comments</strong></div>
                <div className="card-body">
                    <textarea name="comments" className="form-control" placeholder="Add a new comment"
                              onChange={event => setComment(event.target.value)} value={comment}/>
                </div>
            </div>
            <div>
                <button className="btn btn-primary mr-3" onClick={event => {
                    handleCommentSubmit(comment);
                    setComment('');
                }}>Comment</button>
            </div>
        </div>
    );
}

export default CommentAdd;

评论组

class CommentGroup extends Component {
    constructor(props) {
        super(props);

        this.state = {
            body: [],postId: props.postId,storyParts: props.storyParts || [],datePublished: new Date(),isLoaded: false
        }

        this.handleCommentSubmit = this.handleCommentSubmit.bind(this);

    }

    async componentDidMount() {
        await this.setState({comments: this.props.comments});

    }

    handleCommentSubmit(data) {
        console.log(JSON.stringify(data));
        const postData = {
            body: data,postId: this.state.postId,};

        console.log(postData)

        axios.create(postData).then((response) => {
            console.log('response',response.data);
            let comments = this.state.comments;
            if (response.data)
                comments.unshift({
                    id: response.data.storyId,body: response.data.body,localDate: response.data.localDate,})
            this.setState({comments: this.props.comments});
        });
    }

    renderComments() {
        return this.props.comments.map((comment,index) => {
            const {finishStoryId,storyId,body,localDate} = comment;
            return (
                <Comment key={index} storyId={storyId} body={body} localDate={localDate} finishStoryId={finishStoryId}/>
            );

        })
    }

    render() {
        return (
            <div>
                {this.renderComments()}
                <CommentAdd handleCommentSubmit={this.handleCommentSubmit}/>
            </div>
        );
    }
}

export default CommentGroup;

解决方法

看起来有两个问题。首先，从 API 响应设置新状态时，您应该将值设置为更新后的 comments 变量。

this.setState({ comments: comments });

// Or using the object literal shorthand
this.setState({ comments })

接下来，在您的 renderComments 函数中，您应该使用 this.state.comments 而不是 this.props.comments。

return this.state.comments.map((comment,index) => {

,

我在你的代码中看到：

async componentDidMount() {
    await this.setState({comments: this.props.comments});
}

我的假设是，comments 已作为道具传递给 CommentGroup，如果这是您的场景。您不需要将评论设置为 CommentGroup 状态。

您还应该将函数 updateComments 传递给 CommentGroup，CommentGroup 父项应如下所示：

class CommentGroupParent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      comments: []
   }
  }

  updateComments = (comment) => {
    this.setState({ comments: [comment,...this.state.comments]})
  }

  render() {
    return (
      <CommentGroup comments={this.state.comments} updateComments={this.updateComments} />
    )
  }
}

在您的 CommentGroup 代码中：

// ... your code
comments.unshift({
  id: response.data.storyId,body: response.data.body,localDate: response.data.localDate,})
this.setState({comments: this.props.comments});

应该换成

this.props.updateComments({
  id: response.data.storyId,})

附加信息

像下面这样的更新状态是反模式：

let comments = this.state.comments;

comments.unshift({
  id: response.data.storyId,});
this.setState({ comments: this.props.comments });

要更新状态，即使在分配给状态的新变量上也不应使用 unshift，它仍然会导致不可预测的状态变化，您的代码应如下更改：

this.setState({
  comments: [
    {
      id: response.data.storyId,},...this.state.comments
  ],});

,

您正在制作一些反模式。首先，您要复制道具以如下所示：

    this.state = {
        postId: props.postId,// don't do this
        storyParts: props.storyParts || [],}


async componentDidMount() {
    await this.setState({comments: this.props.comments}); // this is also bad

}

你永远不应该做的另一件事是直接改变状态：

            comments.unshift({
                id: response.data.storyId,}) // when dealing with arrays/objects create copies instead modifying then

假设你传递了 this.props.comments，你还应该传递一个 setState 函数 prop（类似于 updateComments）来更新位于某个上层父级中的评论状态。您的 axios 帖子应如下所示：

    axios.create(postData).then((response) => {
        console.log('response',response.data);
        if (response.data)
          const comment = {
                id: response.data.storyId,}
        this.props.updateComments(comment);
    });

和this.props.updateComments将是一个定义在评论根位置的函数，它负责正确处理更新评论：

 // this function lies at root component where comments lies. you pass down accordingly
 updateComments = (comment) => this.setState(({ comments }) => ([comment,...comments]))

记住只使用单一的事实来源。不要将 props 复制到 state，不要直接改变 state。

额外

当使用 ma​​p 渲染时，使用给出的评论中的一些 id 作为键传递。传递 index 可能会在您对数组执行更改时正确响应跟踪器造成麻烦。