javascript - 为什么评论没有立即出现在我的 React 应用项目中？

Question

我正在开发我的第一个 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,
            datePublished: new Date(),
        };

        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;

标签： javascriptreactjsreact-state

Answer 1

我在你的代码中看到：

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,
  body: response.data.body,
  localDate: response.data.localDate,
})

附加信息

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

let comments = this.state.comments;

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

要更新状态，你unshift甚至不应该在分配给一个状态的新变量上使用，它仍然会导致不可预知的状态变化，你的代码应该改变如下：

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