Блог

Главная - Вопросы по программированию - Перезагрузка дочерних элементов при изменении базы данных с помощью React

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

#sql #database #reactjs #components #reload

#sql #База данных #reactjs #Компоненты #перезагрузить

Вопрос:

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

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

Комментарии:

1. Вам необходимо использовать платформу Redux (или альтернативную) для поддержания состояния вашего приложения. Это позволит компонентам прослушивать (подписываться) на текущие изменения и обновлять себя соответствующим образом.

2. Хорошо, спасибо! Я собираюсь подробнее изучить его использование и, вероятно, вернусь к нему после того, как узнаю больше.

3. Это может помочь вам начать medium.com/@supunbhagya /…