Как визуализировать извлеченные данные из API

Question

Я пытаюсь получить данные из API, который я хочу отобразить в таблице. Я следую этому примеру, а также пробовал и другие: https://blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2

Когда я пытаюсь console.log, состояние, которое я получаю, не определено. Когда я console.log данных я получаю правильные данные. Я знаю, как решить мою проблему с помощью чистого JavaScript, но очень хочу, чтобы она работала таким образом.

import React from "react";
import Row from '../components/Row';

class Table extends React.Component {

constructor() {
    super();
    this.state = {
        users: [],
    };
    this.createNewUser = this.createNewUser.bind(this);
    this.deleteExistingUser = this.deleteExistingUser.bind(this);
}

componentDidMount() {
    console.log("Component did mount!");
    fetch("http://localhost:8080/users")
        .then(response => {
            return response.json();
        }).then(data => {
        let users = data.response.map((row) => {
            return (
                <tr>
                    <td>{row.name}</td>
                    <td>{row.email}</td>
                    <td>{row.phone}</td>
                    <td>{row.age}</td>
                    <td>
                        <button className="red waves-effect waves-light btn">
                            Delete
                        </button>
                    </td>
                </tr>
            );
        });
        this.setState({users: users});
        console.log("state", this.state.users);
    });
}

render() {
    return (
        <table id="" className="highlight centered">
            <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Age</th>
                <th>Delete</th>
            </tr>
            </thead>
            <tbody id="table_body">
            {this.state.users}
            </tbody>
        </table>
    );
}
}

export default Table;

Answer 1

Окей, так что после небольшого переделывания я смог решить его.

Я изменил с:

let users = data.response.map((row) => {
        return (
            <tr>
                <td>{row.name}</td>
                <td>{row.email}</td>
                <td>{row.phone}</td>
                <td>{row.age}</td>
                <td>
                    <button className="red waves-effect waves-light btn">
                        Delete
                    </button>
                </td>
            </tr>
        );
    });

до:

let users = data.map((row) => {
    return <Row key={row.email} name={row.name} email={row.email}
            phone={row.phone} age={row.age}/>
});