Почему это дает мне «this.state.UserData.map», это не функция?
Я получаю сообщение об ошибке в своем коде «this.state.UserData.map» не является функцией. я хочу получить список из базы данных, используя выборку. я думаю, что я что-то забыл. пожалуйста, помогите мне удалить эту ошибку. заранее спасибо. Вот мой полный код для отображения списка...
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.info(
"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>
);
}
}
````````
Это означает, что this.state.UserData не является массивом. Глядя на URL-адрес, это Объект.
можешь просто показать, что такое console.info(result)? Вероятная причина - Ваш результат не Array,
да, вы правы, это не массив. Я получаю объект в консоли.
ваш код дает мне ошибку «Не удается прочитать имя свойства» с нулевым значением.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Пожалуйста, замените свой код, я надеюсь, что он работает для вас.
Спасибо
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.info(
"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>
);
}
}
````````
он дал this.state.UserData.length > 0?
@JackBashford Пожалуйста, проверьте свою функцию .map. а также вам нужно проверить длину ваших данных.
Но это объект, а не массив - см. мой ответ. У объектов нет length.
В этом выражении .then(result => { this.setState({ UserData:result }) ваш результат должен возвращать массив объектов, потому что вы объявили UserData как массив. Если this.state.UserData не является массивом, то как вы сопоставляете это.
@SanatGupta, не могли бы вы проверить и отредактировать this.state.UserData.map((item,index) => ( <tr> <td>{item.name}</td> <td>{item.department}</ td> <td>{item.marks}</td> </tr> )): ( <tr> <td>Запись не найдена.</td> </tr> )}
Код @Techiepop обновлен, пожалуйста, проверьте. то, что ты хочешь.? Вы получаете какую-либо ошибку, пожалуйста, дайте мне знать.
@SanatGupta stackblitz.com/edit/react-ehwxdk, пожалуйста, проверьте это на наличие проблемы рядом с:
ваш код дает мне ошибку «Не удается прочитать имя свойства» с нулевым значением.
Пожалуйста, попробуйте еще раз, на самом деле ошибка внутри функции componentWillMount(), теперь снова обновите код, пожалуйста, проверьте.
Данные являются объектом — вам нужно преобразовать их в массив с помощью Object.values:
UserData: Object.values(result)
теперь он дает мне «Невозможно прочитать имя свойства» нулевой ошибки»
ответ не является массивом. Вам нужно преобразовать сервер ответов в массив объектов, чтобы использовать карту
ответ должен нравится это. Вы можете указать серверным службам измениться таким образом или преобразовать это в свое состояние.
[{name: 'John Doe', department: 'CEO', marks: 'title' } , {....} ]
Внутри
.then(result => {...})делайтеconsole.info(result). Что это такое?