Перезагрузка детей при изменении базы данных с помощью React

Question

Я все еще начинающий React (самообучение) и не могу понять, как перезагрузить дочерние элементы компонента при изменении базы данных.Прямо сейчас моя установка выглядит следующим образом: Пример компоновки компонентов .

У меня есть три компонента, содержащиеся в одном более крупном компоненте под названием Контакт.Первый компонент в Contact находится сверху и называется SendAMessage, затем под ним находятся два, называемые LeaveAComment и FetchComments (называемые CommentList на изображении, но FetchComments в реальном коде);LeaveAComment и FetchComments находятся рядом друг с другом.

Прямо сейчас FetchComments отображает все комментарии, содержащиеся в базе данных, а LeaveAComment добавляет в базу данных.Проблема заключается в том, что компонент FetchComments не отображает никаких новых комментариев, созданных компонентом LeaveAComment, если вкладка не обновлена ​​или не удалена.Мне нужна помощь в попытке выяснить способ перезагрузки отображаемого списка комментариев, содержащегося в FetchComments, при каждом обновлении базы данных.Или, если есть способ перезагрузить дочерние элементы FetchComments с помощью кнопки «Отправить» на LeaveAComment.

Пока я понимаю, что родительский компонент может передавать реквизиты дочернему компоненту, но не обязательно наоборот;так как 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>
        );
    }
}