Реагировать JS - Uncaught TypeError: this.props.data.map не является функцией
Я работаю с actjs и не могу предотвратить эту ошибку при попытке отобразить данные JSON (из файла или с сервера):
Uncaught TypeError: this.props.data.map is not a function
Я посмотрел на:
Реагируйте на бросание кода: "TypeError: this.props.data.map не является функцией"
React.js this.props.data.map() не является функцией
Ни один из них не помог мне решить проблему. После загрузки моей страницы я могу убедиться, что this.data.props не является неопределенным (и имеет значение, эквивалентное объекту json - можно вызвать с помощью window.foo), поэтому кажется, что он не загружается вовремя, когда он вызывается ConversationList. Как мне убедиться, что map Метод работает на данных JSON, а не undefined переменная?
var converter = new Showdown.converter();
var Conversation = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="conversation panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
{this.props.id}
{this.props.last_message_snippet}
{this.props.other_user_id}
</h3>
</div>
<div className="panel-body">
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
</div>
);
}
});
var ConversationList = React.createClass({
render: function() {
window.foo = this.props.data;
var conversationNodes = this.props.data.map(function(conversation, index) {
return (
<Conversation id={conversation.id} key={index}>
last_message_snippet={conversation.last_message_snippet}
other_user_id={conversation.other_user_id}
</Conversation>
);
});
return (
<div className="conversationList">
{conversationNodes}
</div>
);
}
});
var ConversationBox = React.createClass({
loadConversationsFromServer: function() {
return $.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
this.loadConversationsFromServer();
setInterval(this.loadConversationsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="conversationBox">
<h1>Conversations</h1>
<ConversationList data={this.state.data} />
</div>
);
}
});
$(document).on("page:change", function() {
var $content = $("#content");
if ($content.length > 0) {
React.render(
<ConversationBox url="/conversations.json" pollInterval={20000} />,
document.getElementById('content')
);
}
})
РЕДАКТИРОВАТЬ: добавление образца разговор.json
Примечание - звонит this.props.data.conversations также возвращает ошибку:
var conversationNodes = this.props.data.conversations.map...
возвращается
Uncaught TypeError: Cannot read property 'map' of undefined
Вот разговор.json:
{"user_has_unread_messages": ложь,"unread_messages_count":0,"разговоры":[{"id":18768,"last_message_snippet":"Lorem ipsum","other_user_id":10193}]}
17 ответов
.map функция доступна только для массива.
Это выглядит как data не в том формате, в котором вы ожидаете (это {}, но вы ожидаете []).
this.setState({data: data});
должно быть
this.setState({data: data.conversations});
Проверьте, какой тип "данных" устанавливается, и убедитесь, что это массив.
Модифицированный код с несколькими рекомендациями (проверка propType и clearInterval):
var converter = new Showdown.converter();
var Conversation = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="conversation panel panel-default">
<div className="panel-heading">
<h3 className="panel-title">
{this.props.id}
{this.props.last_message_snippet}
{this.props.other_user_id}
</h3>
</div>
<div className="panel-body">
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
</div>
);
}
});
var ConversationList = React.createClass({
// Make sure this.props.data is an array
propTypes: {
data: React.PropTypes.array.isRequired
},
render: function() {
window.foo = this.props.data;
var conversationNodes = this.props.data.map(function(conversation, index) {
return (
<Conversation id={conversation.id} key={index}>
last_message_snippet={conversation.last_message_snippet}
other_user_id={conversation.other_user_id}
</Conversation>
);
});
return (
<div className="conversationList">
{conversationNodes}
</div>
);
}
});
var ConversationBox = React.createClass({
loadConversationsFromServer: function() {
return $.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data.conversations});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
getInitialState: function() {
return {data: []};
},
/* Taken from
https://facebook.github.io/react/docs/reusable-components.html#mixins
clears all intervals after component is unmounted
*/
componentWillMount: function() {
this.intervals = [];
},
setInterval: function() {
this.intervals.push(setInterval.apply(null, arguments));
},
componentWillUnmount: function() {
this.intervals.map(clearInterval);
},
componentDidMount: function() {
this.loadConversationsFromServer();
this.setInterval(this.loadConversationsFromServer, this.props.pollInterval);
},
render: function() {
return (
<div className="conversationBox">
<h1>Conversations</h1>
<ConversationList data={this.state.data} />
</div>
);
}
});
$(document).on("page:change", function() {
var $content = $("#content");
if ($content.length > 0) {
React.render(
<ConversationBox url="/conversations.json" pollInterval={20000} />,
document.getElementById('content')
);
}
})
У меня сработало преобразование props.data в массив с помощью
data = Array.from(props.data);
тогда я мог бы использовать data.map() функция
В более общем смысле вы также можете преобразовать новые данные в массив и использовать что-то вроде concat:
var newData = this.state.data.concat([data]);
this.setState({data: newData})
Этот шаблон фактически используется в демонстрационном приложении ToDo Facebook (см. Раздел "Приложение") по адресу https://facebook.github.io/react/.
Это происходит из-за того, что компонент визуализируется до того, как поступили асинхронные данные, вы должны контролировать его перед визуализацией.
Я решил это следующим образом:
render() {
let partners = this.props && this.props.partners.length > 0 ?
this.props.partners.map(p=>
<li className = "partners" key={p.id}>
<img src={p.img} alt={p.name}/> {p.name} </li>
) : <span></span>;
return (
<div>
<ul>{partners}</ul>
</div>
);
}
- Карта не может быть разрешена, когда свойство имеет значение null/undefined, поэтому я сначала сделал элемент управления
this.props && this.props.partners.length > 0 ?
У меня такая же проблема. Решением было изменить значение начального состояния useState со строки на массив. В App.js предыдущее значение useState было
const [favoriteFilms, setFavoriteFilms] = useState('');
Я изменил это на
const [favoriteFilms, setFavoriteFilms] = useState([]);
и компонент, который использует эти значения, перестал выдавать ошибку с функцией .map.
Создайте массив из данных реквизита.
let data = Array.from(props.data)
Затем вы можете использовать его следующим образом:
{ data.map((itm, index) => {
return (<span key={index}>{itm}</span>)
}}
Иногда вам просто нужно проверить, есть ли данные, возвращенные вызовом api,
{this.props.data && (this.props.data).map(e => /* render data */)}
Если вы используете перехватчики реакции, убедитесь, что
dataбыл инициализирован как массив. Вот как это должно выглядеть:
const[data, setData] = useState([])
Вам не нужен массив для этого.
var ItemNode = this.state.data.map(function(itemData) {
return (
<ComponentName title={itemData.title} key={itemData.id} number={itemData.id}/>
);
});
Как упоминалось в принятом ответе, эта ошибка обычно возникает, когда API возвращает данные в формате, например, в виде объекта, а не в виде массива.
Если ни один из существующих ответов здесь не подходит для вас, вы можете преобразовать данные, с которыми имеете дело, в массив с чем-то вроде:
let madeArr = Object.entries(initialApiResponse)
Результирующий
madeArr with будет массивом массивов.
Это отлично работает для меня всякий раз, когда я сталкиваюсь с этой ошибкой.
У меня была аналогичная ошибка, но я использовал Redux для управления состоянием.
Моя ошибка:
Uncaught TypeError: this.props.user.map не является функцией
Что исправило мою ошибку:
Я заключил данные своего ответа в массив. Следовательно, я могу затем отобразить массив. Ниже мое решение.
const ProfileAction = () => dispatch => {
dispatch({type: STARTFETCHING})
AxiosWithAuth()
.get(`http://localhost:3333/api/users/${id here}`)
.then((res) => {
// wrapping res.data in an array like below is what solved the error
dispatch({type: FETCHEDPROFILE, payload: [res.data]})
}) .catch((error) => {
dispatch({type: FAILDFETCH, error: error})
})
}
export default ProfileAction
Вы должны попробовать это:
const updateNews = async()=>{
const res= await fetch('https://newsapi.org/v2/everything?q=tesla&from=2021-12-30&sortBy=publishedAt&apiKey=3453452345')
const data =await res.json();
setArticles(data)
}
Вам нужно преобразовать объект в массив, чтобы использовать map функция:
const mad = Object.values(this.props.location.state);
где this.props.location.state переданный объект в другой компонент.
'DEFAULT_PAGINATION_CLASS': 'rest_framework.pagination.PageNumberPagination', 'PAGE_SIZE': '2',
Я удаляю эту строку кода при настройке, чтобы исправить это
Добавьте эту строку.
var conversationNodes =this.props.data.map.length>0 && this.props.data.map(function(conversation, index){.......}
Здесь мы просто проверяем длину массива. Если длина больше 0, тогда дерзайте.
Возможно, вам потребуется преобразовать объекты в массив, чтобы использовать функцию карты, поскольку вы получаете данные JSON в форме массива, я изменил его на:
const [data, setData] = useState([]);
от:
const [data, setData] = useState(0);
Надеюсь, это может быть полезно для вас. Спасибо
Пытаться componentDidMount() жизненный цикл при получении данных