javascript - 在 API 调用中，我想在表格中显示数据

Question

在 API 调用中，我需要在相应字段的表格中显示数据。我使用 Fetch 方法来显示数据，现在我只得到一个字段。所以我需要显示表格中的所有字段。

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

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

            this.state = {
                 data:[]                               
                 }
                }
    componentDidMount(){
        fetch('http://localhost:3000/data')
        .then(response => response.json())
        .then(user => this.setState({data:user}))
    }         
        render() {
            return (
                <div>
                   {this.state.data.map(use =>(
            <h1 key={use.id} > {use.fname} </h1>
                   ))}

                     <div className="row">
                        <div className="col-sm-8"><table className="table">
                        <thead>
                            <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Tel</th>
                            <th>Address</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Zip</th>
                            <th>Edit</th>
                            <th>Delete</th>
                            </tr>
                        </thead>

                    </table>
                    </div>

                    </div> 

                </div>
            )
        }
    }

    export default App;

标签： javascriptreactjs

Answer 1

也许是这样的。请在运行项目之前检查代码的语法

  render() {
            return (
                <div>
                     <div className="row">
                        <div className="col-sm-8"><table className="table">
                        <thead>
                            <tr>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Tel</th>
                            <th>Address</th>
                            <th>City</th>
                            <th>State</th>
                            <th>Zip</th>
                            <th>Edit</th>
                            <th>Delete</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.data.map(use => (
                                <tr>
                                    <td>{use.fname}</td>
                                    <td>{use.lname}</td>
                                    <td>{use.tel}</td>
                                    <td>{use.add}</td>
                                    <td>{use.city}</td>
                                    <td>{use.state}</td>
                                    <td>{use.zip}</td>
                                    <td><button>edit</button></td>
                                    <td><button>delete</button></td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                    </div>

                    </div> 

                </div>
            )
        }
    }