Question

我正在尝试更新应用中的评论部分。

我首先在componentDidMount中获取并列出是否有评论。提交新评论时，我正在发送发布请求，然后重新渲染我的组件并显示所有可能的评论。

在更新组件时，我调用componentDidUpdate，传递if语句prevState.commentHistory !== this.state.commentHistory，然后尝试再次获取所有注释的列表。那是我的应用进入无限循环的时候。

任何帮助将不胜感激。



class CommentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
            commentText: '',    
            commentHistory: [],
        };
  }

    componentDidMount = () => {
        this.getMethod()
    }

    componentDidUpdate = (prevProps, prevState) => {
        if (prevState.commentHistory !== this.state.commentHistory) {
            this.getMethod()
        }
    }

    getMethod = () => {
        requestConsoleAPI('GET', 'something/' + getDetailPageId() + '/comments', null, (response) => {
            this.setState({ commentHistory: response})
        })
    }

    handleChange = (e) => {
        e.preventDefault();
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    handleSubmit = (e) => {
        e.preventDefault();

        let data = {
            comment: this.state.commentText
        }

        if (data.comment) {
            requestConsoleAPI('POST', 'something/' + getDetailPageId() +'/comments', data, (response) => {
                this.setState({ commentHistory: [response] })
            })
        }

        this.setState({
            commentText: '',
        })
    }

    render() {
        let renderComments = this.state.commentHistory.map((singleComment) => {
            return (
                <tr data-id={singleComment.id} key={singleComment.id}>
                    <td>{singleComment.createdAt}</td>
                    <td>{singleComment.author}</td>
                    <td>{singleComment.text}</td>
                </tr>
            )
        });

    return (
      <div className="change-wrapper hidden" id="comments">
                <div className="change-head">
                    <h3 data-count="X">Comments</h3>
                </div>

                <div className="change-body">
                    <form className="form" onSubmit={this.handleSubmit}>
                        <div className="row">
                            <div className="col-lg-12">
                                <div className="form-group">
                                    <textarea name="commentText" value={this.state.commentText} onChange={this.handleChange} className="form-control" placeholder="Your comment..." rows="8"></textarea>
                                </div>

                                <div className="form-group m-t-25">
                                    <button type="submit" className="btn btn-next" >Send Comment</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div className="row">
                        <div className="list col-lg-12">
                            <h4 className="m-t-50">Comment History</h4>
                            <table className="table table-striped table-comments">
                                <thead>
                                    <tr>
                                        <th>Created</th>
                                        <th>Author</th>
                                        <th>Message</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    { renderComments }
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colSpan="3" className="text-center"><i>No comments yet</i></td>
                                    </tr>
                                </tfoot>
                            </table>

                            {/* {{ consoleMacros.listLoading() }} */}
                        </div>
                    </div>
                </div>
            </div>
    );
  }
}

const domContainer = document.querySelector('#comment_container');
ReactDOM.render(<CommentComponent/>, domContainer);

Answer 1

如El Aoutar Hamza所述，您正在比较数组引用而不是检查其值。如果要比较两个数组，则必须检查它们之间的每个值。但是据我所知，对于您的情况，您可以简单地比较数组的长度，这样每次添加/删除一些注释时，UI都会更新

为什么componentDidMount陷入无限循环？

1 个答案: