Реакция - как отрендерить компонент после POST-данных в базу данных (mongodb)

Question

Я создаю приложение, которое отправляет данные в мою базу данных (mongodb). В ComponentDidMount я выбираю данные из этой базы данных, сохраняю их в this.state и показываю их во внешнем интерфейсе. Далее я хочу добавить еще одну единицу данных в эту базу данных из формы в веб-интерфейсе. Пока все работает нормально, потому что эти данные добавляются в базу данных, но мне нужно обновить страницу, чтобы увидеть новые данные.

Итак, мне интересно, как динамически отображать в интерфейсе вновь добавленный элемент в базу данных.

Моими первыми мыслями было что-то с жизненным циклом компонента, или, может быть, какая-то функция, которая выбирает данные после отправки формы, но это не сработает.

Есть идеи?

Вот мой код:

import React, { Component } from 'react';
import axios from 'axios';
import Users from './Users';

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            users: [],
            group: '',
            password: '',
            firstName: '',
            lastName: '',
            dateOfBirth: '',
            listOfUserGroups: ''
        };

        this.handleSubmit = this.handleSubmit.bind(this);
    }

    componentDidMount() {
        axios.get('http://localhost:3001/users')
          .then(res => {
            const users = res.data;
            this.setState({ users });
            console.log(this.state.users);
          })
    }

    handleGroupChange = e => {
        this.setState({ group: e.target.value });
    }

    handlePasswordChange = e => {
        this.setState({ password: e.target.value });
    }

    handleFirstNameChange = e => {
        this.setState({ firstName: e.target.value });
    }

    handleLastNameChange = e => {
        this.setState({ lastName: e.target.value });
    }

    handleDateOfBirthChange = e => {
        this.setState({ dateOfBirth: e.target.value });
    }

    handleListOfUserGroupsChange = e => {
        this.setState({ listOfUserGroups: e.target.value });
    }

    handleSubmit(e) {
        e.preventDefault();

        const newUser = {
            group: this.state.group,
            password: this.state.password,
            firstName: this.state.firstName,
            lastName: this.state.lastName,
            dateOfBirth: this.state.dateOfBirth,
            listOfUserGroups: this.state.listOfUserGroups
        };

        axios.post('http://localhost:3001/users', newUser)
            .then(response => {
                console.log('Saved');
                console.log(response.data);
                console.log(this.state.firstName);
            });
    }

    render() {
        return (
            <div>

                <div className='mainWrapper'>
                  <form className='formStyle' onSubmit={this.handleSubmit}>
                      <label>Group</label>
                      <input type="text" onChange={this.handleGroupChange} />

                      <label>Password</label>
                      <input type="text" onChange={this.handlePasswordChange} />

                      <label>First name</label>
                      <input type="text" onChange={this.handleFirstNameChange} />

                      <label>Last name</label>
                      <input type="text" onChange={this.handleLastNameChange} />

                      <label>Date of birth</label>
                      <input type="text" onChange={this.handleDateOfBirthChange} />

                      <label>List of user groups</label>
                      <input type="text" onChange={this.handleListOfUserGroupsChange} />

                      <button type="submit">Add</button>
                  </form>
                </div>

                <Users users={this.state.users} />

                <div>
                    <ul>
                        <li>{this.state.group}</li>
                        <li>{this.state.password}</li>
                        <li>{this.state.firstName}</li>
                        <li>{this.state.lastName}</li>
                        <li>{this.state.dateOfBirth}</li>
                        <li>{this.state.listOfUserGroups}</li>
                    </ul>
                </div>

            </div>
        );
    }
}

export default Main;

Answer 1

Вам необходимо обновить свое состояние в ответе на сообщение. По умолчанию, когда состояние вашего компонента или реквизиты изменяются, ваш компонент будет повторно отображаться.

Решение 1:

axios.post('http://localhost:3001/users', newUser)
        .then(response => {
            console.log(response.data); //need to be your new "user" from server response
        //You can update your "users" state there with add new user in your state
        });

Решение 2:

axios.post('http://localhost:3001/users', newUser)
        .then(response => {
            console.log(response.data); //need to be your new "user" from server response
            //You can send your "get" request again to update your component state
            axios.get('http://localhost:3001/users')
                .then(res => {
                const users = res.data;
                this.setState({ users });
                console.log(this.state.users);
            })
        });

Answer 2

Просто нажмите на массив, чтобы обновить состояние, и он будет перерисован.

 handleSubmit(e) {
    e.preventDefault();

    const newUser = {
        group: this.state.group,
        password: this.state.password,
        firstName: this.state.firstName,
        lastName: this.state.lastName,
        dateOfBirth: this.state.dateOfBirth,
        listOfUserGroups: this.state.listOfUserGroups
    };

    axios.post('http://localhost:3001/users', newUser)
        .then(response => {
            console.log('Saved');
            this.setState(prevState=>({
              users: [newUser, ...prevState.users]
            }))
            console.log(response.data);
            console.log(this.state.firstName);
        });
}

Или, если необходимо, вы можете перейти в состояние до вызова axios и вернуться обратно только в случае сбоя вызова. Это называется Оптимистичный пользовательский интерфейс

Примечание. Вы можете обрабатывать множественные изменения, например this

Answer 3

вы можете добавить стандартную функцию this.forceUpdate() после публикации данных для повторного рендеринга компонента