Question

我是新来的人。我有一个POST API，它将用户名和电子邮件ID作为输入并返回该特定用户的详细信息。我想通过请求的形式提交用户名和电子邮件ID，提交后，我想在用户界面的表格中呈现用户详细信息，即用户名，电子邮件ID，年龄等。该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.
 }

对于emailID，还有一个handleEmailChange功能类似于handleUserNameChange。

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>

反应发布表单数据并从数据库渲染数据

1 个答案: