使用React

Question

我仍然是主要的React初学者（自学），似乎无法弄清楚数据库更改后如何重新加载组件的子元素。现在，我的设置如下图所示： Component Layout Example。

我在一个称为Contact的较大的组件中包含三个组件。 Contact中的第一个组件位于顶部，称为SendAMessage，然后在其下方有两个组件，分别名为LeaveAComment和FetchComments（在图像中称为CommentList，但在实际代码中为FetchComments）。 LeaveAComment和FetchComments彼此相邻。

现在，FetchComments显示数据库中包含的所有注释，LeaveAComment添加到数据库中。问题在于，除非刷新或离开了选项卡，否则FetchComments组件不会显示由LeaveAComment组件创建的任何新注释。我需要帮助来尝试找出一种方法，以便在每次数据库更新时重新加载FetchComments中包含的显示的注释列表。或者，如果可以通过LeaveAComment上的“提交”按钮重新加载FetchComments子级。

到目前为止，我知道父级组件可以将prop传递给子级组件，但不一定要相反。由于LeaveAComment和FetchAComment是兄弟姐妹，因此我不确定该怎么办。任何帮助将非常感激。这是到目前为止的代码：

export class LeaveAComment extends Component {
    constructor(props) {
        super(props);

        this.state = {
            name: "",
            comment: "",
            date: ""
        }

        this.onChangeName = this.onChangeName.bind(this);
        this.onChangeComment = this.onChangeComment.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onChangeName(e) {
        this.setState({
            name: e.target.value
        })
    }

    onChangeComment(e) {
        this.setState({
            comment: e.target.value
        })
    }

    onSubmit(e) {
        e.preventDefault();
        console.log(`The values are ${this.state.name}, ${this.state.comment}, and ${this.state.date}`);

        var data = new FormData(e.target);

        //console.log(data)

        fetch("api/Comment", {
            method: 'POST',
            body: data
        })

        // Clear input boxes
        this.setState({
            name: "",
            comment: "",
            date: ""
        })

        // Re-load FetchComments.js here?

    }

    render() {
        return (
            <div>
                <header>
                    <h2> Leave A Comment </h2>
                </header>

                <form
                    onSubmit={this.onSubmit}
                    method="POST">      
                    <label> Name: </label>
                    <input
                        name= "name"
                        className="form-control" value=''
                        value={this.state.name}
                        onChange={this.onChangeName}/>
                    <br />

                    <label> Comment: </label>
                    <input
                        name="comment"
                        className="form-control"
                        value={this.state.comment}
                        onChange={this.onChangeComment}/>
                    <br />

                    <div
                        name="date"
                        className="form-control"
                        value={new Date().getDate()}
                        hidden>
                    </div>

                    <input type="submit" value="Submit" className="btn btn-primary" />
                </form>
                </div>
        );
    }
}

export class FetchComments extends Component {
    constructor() {
        super();

        this.state = {
            loading: true,
            commentList: []
        };
    }

    componentDidMount() {
        fetch('api/Comment')
            .then(res => res.json())
            .then(cl => this.setState({ loading: false, commentList: cl },
                () => console.log("successfully fetched all comments", cl)))
    }

    renderCommentTable() {
        return (
            < div className = "container" >
            <div className="panel panel-default p50 uth-panel">
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th> Name </th>
                            <th> Comment </th>
                            <th> Time Stamp </th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.commentList.map(c =>
                            <tr key={c.id}>
                                <td>{c.name} </td>
                                <td>{c.comment}</td>
                                <td> {new Intl.DateTimeFormat('en-US').format(c.comentDate)} </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>
                </div >
        )
    }

    render() {
        let contents = this.state.loading ? <p> <img src="/Icons/LoadingPaopu.gif" alt="Loading Paopu Icon" /> </p>
            : this.renderCommentTable(this.state.commentList); 

        return (
            <div>
                <h2> Comment List </h2>

                {contents}
           </div>
        );
    }
}