Question

我的问题是，我想在reactJS中打印表格。我已经使用axios从django视图中获取数据，我收到了回复。但是，我不知道以表格格式设置这些数据的人。我使用了反应引导程序表。我在ReactJS中很新。我的代码片段是：

change(){
axios.get('http://127.0.0.1:8000/users/')
.then(function (response) {
  console.log("in user",response.data[0].id);
  this.setState({
    id: response.data[0].id,
    username: response.data[0].username,
    email: response.data[0].email,
});
})
.catch(function (error) {
  console.log(error);
});

}

但是现在如何在“tbody”标签中使用此ID，用户名和电子邮件？请指导我。感谢。

Answer 1

在render函数中使用react-bootstrap Component。只需使用

<tbody>
  <tr>
    <td>{this.state.id}</td>
    <td>{this.state.username}</td>
    <td>{this.state.email}</td>
  </tr>
</tbody>

Answer 2

实际上，您只保存要声明一个元素的状态，应该保存来声明结果的数据数组。

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

export default class example extends Component {
    constructor(props) {
        super(props);

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

    componentDidMount() {
        Axios.get('http://127.0.0.1:8000/users/')
            .then(function (response) {
                this.setState({
                    users: response.data,
                });
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    render() {
        const { users } = this.state;
        return users.lenght > 0 ? (
            <table striped>
                <thead>
                    <tr>
                        <td>ID</td>
                        <td>Username</td>
                        <td>Email</td>
                    </tr>
                </thead>
                <tbody>
                    {users.map((user) => {
                        return (
                            <tr key={user.id}>
                                <td>{user.id}</td>
                                <td>{user.username}</td>
                                <td>{user.email}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        ) : (
            <h1>No data available!</h1>
        );
    }
}

使用reactJS中的响应数据创建动态表

2 个答案: