Почему он дает мне, что this.state.UserData.map не является функцией? - PullRequest
0 голосов
/ 29 мая 2019

Я получаю сообщение об ошибке «this.state.UserData.map» не является функцией. я хочу получить список из базы данных, используя fetch. я думаю, что забыл что-то. пожалуйста, помогите мне удалить эту ошибку. заранее спасибо. Вот мой полный код для отображения списка ...

import React from 'react';
import ReactDOM from 'react-dom';
export default class FetchedData extends React.Component{
  constructor(props){
    super(props);
    this.state={ UserData:[] };
    this.headers=[
      {key:1,label:'Name'},
      {key:2,label:'Department'},
      {key:3,label:'Marks'},
    ];
  }

  componentDidMount(){
    fetch("https://www.veomit.com/test/zend/api/fetch.php")
    .then(response => {
                return response.json();
            })
    .then(result => {
                this.setState({
                    UserData:result
                })
        .catch(error => {
        console.log(
          "An error occurred while trying to fetch data from Foursquare: " +error
        );
      });
    });
  }
  render(){
    return(
      <div>
      <table className="table table-bordered">
          <thead>
            <tr>
              {
                        this.headers.map(function(h) {
                            return (
                                <th key = {h.key}>{h.label}</th>
                            );
                        })
                        }
            </tr>
          </thead>
          <tbody>
              {
                        this.state.UserData.map(function(item){             
                        return (
                                <tr>
                                  <td>{item.name}</td>
                                  <td>{item.department}</td>
                                  <td>{item.marks}</td>
                                </tr>
                            );
                        })
                    }
          </tbody>
      </table>
      </div>
    );
  }
}
````````

Ответы [ 3 ]

0 голосов
/ 29 мая 2019

Данные являются объектом - вам нужно преобразовать их в массив с Object.values:

UserData: Object.values(result)
0 голосов
/ 29 мая 2019

ответ не является массивом.Вам необходимо преобразовать сервер ответов в массив объектов, чтобы использовать карту

ответ должен выглядеть следующим образом.Вы можете указать, чтобы службы бэкэнда менялись таким образом, или вы конвертируете таким образом в ваш штат

[{name: 'John Doe', department: 'CEO', marks: 'title' } , {....} ]
0 голосов
/ 29 мая 2019

Пожалуйста, замените ваш код. Надеюсь, он работает для вас.

Спасибо

 import React from 'react';
    import ReactDOM from 'react-dom';
    export default class FetchedData extends React.Component{
      constructor(props){
        super(props);
        this.state={ UserData:[] };
        this.headers=[
          {key:1,label:'Name'},
          {key:2,label:'Department'},
          {key:3,label:'Marks'},
        ];
      }

       componentWillMount() {
            fetch("https://www.veomit.com/test/zend/api/fetch.php")
            .then(response => {
                 return response.json();
            })
            .then(result => {
                this.setState({
                    UserData: result
                });
             })
             .catch(function(error) {
                    console.log(
                    "An error occurred while trying to fetch data from Foursquare: " +
                          error
                    );
            });
        }
      render(){
        return(
          <div>
          <table className="table table-bordered">
              <thead>
                <tr>
                  {
                            this.headers.map(function(h) {
                                return (
                                    <th key = {h.key}>{h.label}</th>
                                );
                            })
                            }
                </tr>
              </thead>
              <tbody>
                  { this.state.UserData.length > 0 ?
                         this.state.UserData.map((item,index) => (
                             <tr key={index}>
                                      <td>{item.name}</td>
                                      <td>{item.department}</td>
                                      <td>{item.marks}</td>
                                    </tr>
                          ))
                          ) : (
                               <tr>
                                  <td colspan="3">No record found.</td>
                                </tr>
                              )}
                  </tbody>
          </table>
          </div>
        );
      }
    }
    ````````
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...