列名を表示 - ReactJS

ニコラス：

EDIT

私はReactJSに完全に新しいです、私の愚かさでご負担ください。

最近、私はReactJSとPHPで遊んでてきた、そして現在のマップに貼り付け。（）

App.Js

export default class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            uNames:[]
        };

        this.submitData = this.submitData.bind(this);
    }
    submitData=()=>{
        fetch('http://localhost/public/api/data.php')
        .then((response) => response.json())
        .then((result) => {
            this.setState({uNames: result});
            console.log(this.state.uNames);
       })
    }
    render(){
        return(
            <div>
                <Button onClick={this.submitData}>Test</Button>
                {this.state.uNames.map((uName, i) => 
                    <Table key={i}>
                        <thead>
                            <td key={uName[i]}>
                                {uName[i]}
                            </td>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                {uName.id}
                                </td>
                                <td>
                                {uName.firstname}
                                </td>
                                <td>
                                {uName.lastname}
                                </td>
                            </tr>
                        </tbody>
                    </Table>
                )}
            </div>
        );
    }
}

PHP

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header("Cache-Control: no-cache");
}

$serverName = "localhost";
$serverUserName = "root";
$serverPassword = "";
$dbName = "test";
$connection = new mysqli ($serverName, $serverUserName, $serverPassword, $dbName);

if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
} 

$sql = "SELECT id, firstname, lastname FROM mydata";
$result = $connection->query($sql);
if ($result->num_rows > 0) {
    // output data of each row
    while($row = $result->fetch_array()) {
        $arr[] = $row;
        echo json_encode($arr);
    }
} else {
    echo "0 results";
}
$connection->close();
?>

MYSQL（テーブルMYDATA）

id|firstname|lastname
1 |     John|     Doe

行データ（1、ジョンドウうまく示す）が、列ヘッダの（ID、姓、氏名）、何も存在。

それが可能であるので、列ヘッダが示すまで（これはMySQLのテーブルから動的に読み出す）またはそれが静的コンテンツとしてすべての単一の列ヘッダーを設定することによってのみ可能ですか？

Mayank Pandeyz：

あなたのコードのロジックと疑問によると、uNamesオブジェクトの配列であり、あなたが使用しているmap配列を反復処理し、個々のオブジェクトを取得すると、そこからあなたは、このコードによってなどの名前を示しています。

uName.id
uName.firstname

などと正常に動作しています。その場合、あなたは使いカント：

uName[i]

uNameは、マップの下のオブジェクトであり、それは、IDなどのキーを持つファーストネームなどと、なぜあなたは何を取得されていませんだ数字キーを持っていないよう。私は、これが問題を理解する上であなたを助けることを願っています。