javascript - React JS + PHP(Mysql) = "records.map is not a function";

Question

我的代码有什么问题吗？

我的PHP文件正确返回json数组，问题仅出现在javascript代码中，javascript在状态下正确实现json，只有当我使用 map 显示结果时出现错误。

帮助

JS文件

import React,{Component} from 'react';
import axios from 'axios';
export default class Main extends Component{
    state = {
        records : [],
        isLoading : true
    }
    componentDidMount(){
        this.loading();
    }

    loading = async () => {
        const response = await axios.get("http://localhost/apihunt/carro/read.php");
        const {records} = response.data;   
        this.setState({records, isLoading : false});
        //console.log(this.state.records);
    }

    render(){
        const {records, isLoading} = this.state;
        return(
            <div>
                {!isLoading ? records.map((car)=>(
                    <div key={car.id}>
                        <p>{car.id}</p>
                        <p>{car.nome}</p>
                        <p>{car.descricao}</p>
                    </div>
                )) 
                    : <p>:(</p>}
            </div>
        );
    }
}

PHP 文件

<?php
    //Header
    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/json; charset=UTF-8");
    include '../conf/database.php';
    include '../objects/carro.php';
    $database = new Database();
    $db = $database->getConnection();
    $carro = new Carro($db);
    $stmt = $carro->read();
    $num = $stmt->rowCount();
    if($num>0){
        $carros_arr=array();
        $carros_arr["records"]=array();
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            extract($row);
            $carros_arr["records"][$id] = array(
                "id" => $id,
                "nome" => $nome,
                "descricao" => html_entity_decode($descricao),
                "marca" => $marca,
                "valor" => $valor
            );
        }
        http_response_code(200);
        echo json_encode($carros_arr);
    }else {
        http_response_code(404);
        echo json_encode(
            array("message" => "No products found.")
        );
    }
?>

php 文件的转储

string(420) "{"records":{"1":{"id":"1","nome":"Ferrari  488","descricao":"uma ferrari n\u00e9, n\u00e3o precisa mais dizer nada","marca":"Ferrari","valor":"1000000"},
"2":{"id":"2","nome":"Uno","descricao":"carro basico","marca":"Fiat","valor":"14000"},
"3":{"id":"3","nome":"Civic","descricao":"carro de luxo","marca":"Honda","valor":"100000"},
"4":{"id":"4","nome":"Hilux","descricao":"carro 4x4 ","marca":"Toyota","valor":"120000"}}}"

records.map 不是一个函数；

Answer 1

Map 需要一个数组，而不是一个对象，因此 PHP 需要创建一个索引数组而不是关联数组。最具体的问题在于:

carros_arr["records"][$id] = [] // defines PHP assoc, becomes JS object
carros_arr["records"][] = [] // defines PHP indexed, becomes JS array

您可以通过两种不同的方式修复它。当您使用关联数组(成为 JSON/JavaScript object)时，您的 PHP 中需要一个索引数组(成为 JSON/JavaScript array)。有两种方法可以解决此问题:

// Before fetch loop define $carros_arr["records"] = [];
$carros_arr["records"][] = [
    "id" => $id,
    "nome" => $nome,
    "descricao" => html_entity_decode($descricao),
    "marca" => $marca,
    "valor" => $valor
];

或者...

$carros_arr["records"] = $stmt->fetchAll(PDO::FETCH_ASSOC));

如果使用one-liner并且需要修改数据:

foreach ($carros_arr["records"] as &$record) {
    $record['descricao'] = html_entity_decode($record['descricao']);
}