Реагировать на данные формы публикации и отображения данных из базы данных

Question

Я новичок, чтобы реагировать. У меня есть POST API, который принимает имя пользователя и идентификатор электронной почты в качестве входных данных и возвращает данные конкретного пользователя. Я хочу отправить имя пользователя и идентификатор электронной почты через форму в качестве запроса, а после отправки я хочу отобразить данные пользователя, например, имя пользователя, идентификатор электронной почты, возраст и т. Д. В пользовательском интерфейсе React, в виде таблицы. API работает нормально и возвращает требуемый ответ. Как мне решить эту проблему?

Код реакции: -

import React, { Component } from 'react';
import axios from 'axios';

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

        this.state = {
            users: [],
            username: '',
        };

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

    handleUserNameChange = e => {
        this.setState({ username: e.target.value });
    }


    handleSubmit(e) {
        e.preventDefault();

        const newUser = {
            username: this.state.username,
        };


    }

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




    render() {
        return (
            <div>

                <div>
                  <form onSubmit={this.handleSubmit}>

                      <label>User Name</label>
                      <input type="text" onChange={this.handleUserNameChange} />

                      <button type="submit">Add</button>
                  </form>
                </div>
                <div>
                    <ul>
                        <li>{this.state.username}</li>
                    </ul>
                </div>

            </div>
        );
    }
}

export default App;

Answer 1

Вы можете сделать это следующим образом. Это просто базовая реализация. Измените, как вам нужно.

1) У вас будет два поля input для username и email ID в форме.

state={
   username: '',
   emailID: '',

   // also define states for response data user's name, age etc.
 }

Также есть одна функция handleEmailChangeна handleUserNameChange для emailID.

2) Сделайте запрос на публикацию в handleSubmit:

handleSubmit(e) {
    e.preventDefault();

    const newUser = {
        username: this.state.username,
        emailID: this.state.emailID
    };

    axios.post('http://localhost:8080/api/users', newUser)
        .then(response => {           
            this.setState({}) // get age, name and other data from response and set 
                              //  the states here respectively 
        })
        .catch(error => error);            
}

3) Выполните рендеринг в таблице

 <table>
  <tr>
    <th>Name</th>
    <th>Email ID</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>{this.state.name}</td>
    <td>{this.state.emailID}</td>
    <td>{this.state.age}</td>
  </tr>
</table>