Отображение данных массива через map в react Typescript

#reactjs #typescript #react-typescript

Вопрос:

Я пытаюсь отобразить данные массива, но не отображает данные на веб-странице React. Кто-нибудь укажет мне, где моя ошибка, и поправит меня. Пожалуйста, посмотрите строку комментария //

 /* eslint-disable */

import React, { Component } from 'react';

import axios from 'axios';


class RestaurantList extends Component<{}, any> {

    constructor(props: any) {
        super(props);
        this.state = { restoLists: null };
    }

    componentDidMount() {

        axios.get("http://localhost:3030/restauranst")
            .then((response) => {
                this.setState({ restoLists: response.data })
                console.log(response);
            })
            .catch((error) => console.error(error));
    }

    render() {
        console.log(this.state.restoLists);
        return (
            <div>
                <h1>RestaurantList</h1>
                {
                    this.state.restoLists ?
                        <div>
                            <ul>
                                {
                                    this.state.restoLists.map((itme: any) => {
                                        console.log(itme.name); // work this line
                                        <li>
                                            {itme.name} {/**Does not work this line */}
                                        </li>
                                    })

                                }
                            </ul>
                        </div>
                        :
                    <p>Please Wait...</p>
                }
            </div>
        );
    }
}

export default RestaurantList;

Ответ API

 {
  "data": [
    {
      "id": 1,
      "name": "Pizza Hut",
      "address": "Dwarka Sector-14",
      "rating": "4.5",
      "email": "pizzhut@pizza.com"
    },
    {
      "id": 2,
      "name": "Mc-Dondle",
      "address": "Dwarka Sector-15",
      "rating": "4.0",
      "email": "mcdondle@mcdon.com"
    }
  ],
  "status": 200,
  "statusText": "OK",
  "headers": {
    "cache-control": "no-cache",
    "content-type": "application/json; charset=utf-8",
    "expires": "-1",
    "pragma": "no-cache"
  },
  "config": {
    "url": "http://localhost:3030/restauranst",
    "method": "get",
    "headers": {
      "Accept": "application/json, text/plain, */*"
    },
    "transformRequest": [
      null
    ],
    "transformResponse": [
      null
    ],
    "timeout": 0,
    "xsrfCookieName": "XSRF-TOKEN",
    "xsrfHeaderName": "X-XSRF-TOKEN",
    "maxContentLength": -1,
    "maxBodyLength": -1
  },
  "request": {}
}

Ответ №1:

Вы ничего не возвращаете внутри карты.

   this.state.restoLists.map(({id, name}: any) => {
           return <li key={id}>{name}</li>;
        });

Также вы можете использовать сокращенный метод функции стрелки,

   this.state.restoLists.map(({id, name}: any) => <li key={id}>{name}</li>);

1. можно ли использовать any в этой ситуации? Я новичок в TS и задаюсь вопросом, не следует ли нам определять каждый отдельный тип переменной / параметра? например, в этой ситуации не должно быть string вместо any ? просто вопрос

Ответ №2:

Возврат из вашей функции map, поскольку вы пропускаете return. и загрузчик также пытается использовать сквозное состояние. По умолчанию сделать isLoadding false

состояние

 this.state = { restoLists: null, isLoadding : false };
componentDidMount() {
        this.setState({isLoading: true})
        axios
        .get("http://localhost:3030/restauranst")
        .then((response) => {
            this.setState({ restoLists: response.data, isLoading: false})
        }).catch((error) => console.error(error));
 }

JSX

  const { restoLists } = this.state;
   return(
    <div>
    {isLoadding ? <ul>
        {restoLists amp;amp; restoLists.map(({id, name}: any) => {
               return <li key={id}>{name}</li>;
            });
        }
       </ul>
     :<p>Loading...</p>}
    </div>
 )

Ответ №3:

Вам просто не хватало круглых скобок внутри возвращаемого блока вашего метода map:

  this.state.restoLists.map((itme: any) => {(
    <li>
        {itme.name}
    </li>
 )})