React JS + PHP(Mysql) = "records.map не является функцией";

В чем проблема с моим кодом?

Мой файл PHP правильно возвращает массив json, проблема только в коде javascript, javascript правильно реализует json в состоянии, только ошибка, когда я использую карту для отображения результатов.

помощь

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.info(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 не является функцией;

Если вы уверены, что проблема в вашем JS, а не в PHP, удалите этот тег (и добавьте дамп результатов из PHP).

M. Eriksson 13.05.2019 16:26

Каков формат данных ваших записей? Кажется, это не массив.

Ardit 13.05.2019 16:27

я отредактировал сообщение

Everton Fernandes 13.05.2019 16:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
3
441
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Map требует массив, а не объект, и поэтому PHP должен создать индексированный массив, а не ассоциативный массив. В частности, проблема заключается здесь:

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

Вы можете исправить это двумя разными способами. Вам нужен индексированный массив (становится JSON/JavaScript array) в вашем PHP, в то время как вы используете ассоциативный массив (становится JSON/JavaScript object). Есть 2 способа это исправить:

// 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));

Если вы используете однострочный и вам нужно изменить данные:

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

Он все еще мог использовать ассоциативный массив и делать: Object.keys(this.state.records).map((record) => { ... });

Halfpint 13.05.2019 17:46

Хорошая мысль, не подумал об этом. Я считаю хорошей практикой хорошо структурировать данные на стороне сервера, но это определенно решение, и, конечно, каждому свое.

MaKR 13.05.2019 20:25

Другие вопросы по теме