Функция карты не может быть реализована в приложении reactJS
Я новичок в реакции и создал простое приложение из учебника. В учебнике они использовали компоненты без состояния, тогда как я перешел на компоненты с отслеживанием состояния. Но я получаю эту ошибку
TypeError: Cannot read property 'map' of undefined
Я не знаю, где мой код ошибается. Мне кажется, это нормально.
message-list.js
import React, { Component } from 'react';
import MessageView from './message-view';
class MessageList extends Component {
state = {
messages: [
{
from: 'John',
message: 'The event will start next week',
status: 'unread'
},
{
from: 'Martha',
message: 'I will be traveling soon',
status: 'read'
},
{
from: 'Jacob',
message: 'Talk later. Have a great day!',
status: 'read'
}
]
};
render() {
const { messageViews } = this.state.messages;
console.info(messageViews);
return (
<div>
<h1>List of Messages</h1>
{messageViews.map(msgList => (
<MessageView message = {msgList.messages} />
))}
</div>
);
}
}
export default MessageList;
сообщение-view.js
import React, { Component } from 'react';
class MessageView extends Component {
render() {
const list = this.props.message;
console.info(list);
return (
<div className = "container">
<div className = "from">
<span className = "label">From : </span>
<span className = "value">{list.name} </span>
</div>
<div className = "status">
<span className = "label">Status : </span>
<span className = "value">{list.status}</span>
</div>
<div className = "message">
<span className = "label">Message : </span>
<span className = "value">{list.content} </span>
</div>
</div>
);
}
}
export default MessageView;
Я попытался найти, почему функция карты не работает, но безрезультатно. Я очень новичок, чтобы отреагировать. Может ли кто-нибудь помочь мне в этом.
Ответы 2
TypeError: Cannot read property 'map' of undefined
Чтобы исправить эту ошибку, вы должны удалить фигурные скобки, окружающие messageViews, как это
render() {
const messageViews = this.state.messages; //removed the curly brackets
return (
<div>
<h1>List of Messages</h1>
{messageViews.map(msgList => (
<MessageView message = {msgList.messages} />
))}
</div>
);
}
Потому что, когда вы пишете так:
const { messageViews } = this.state.messages
Он попытается деструктурировать объект this.state.messages, и, как мы все видим, их свойства messageViews не существует. Следовательно, messageViews - это неопределенный.
А затем, когда вы используете метод map(), такой как messageViews.map(msgList => (...)), программа попытается вызвать метод map() переменной неопределенный. Вот почему вы получили ошибку: Невозможно прочесть свойство "карта" неопределенного значения.
В вашем коде есть несколько основных проблем
Первый: Сообщения о состоянии не содержат ключа, называемого messageViews, и, следовательно, вы получаете сообщение об ошибке
Второй: В компоненте представления сообщений вы не получаете доступ к правильным клавишам, т.е. from, message вместо name, content
Рабочий код
class MessageList extends Component {
state = {
messages: [
{
from: "John",
message: "The event will start next week",
status: "unread"
},
{
from: "Martha",
message: "I will be traveling soon",
status: "read"
},
{
from: "Jacob",
message: "Talk later. Have a great day!",
status: "read"
}
]
};
render() {
const { messages: messageViews } = this.state;
console.info(messageViews);
return (
<div>
<h1>List of Messages</h1>
{messageViews.map(msgList => <MessageView message = {msgList} />)}
</div>
);
}
}
export default MessageList;
class MessageView extends Component {
render() {
const list = this.props.message;
console.info({ list });
return (
<div className = "container">
<div className = "from">
<span className = "label">From : </span>
<span className = "value">{list.from} </span>
</div>
<div className = "status">
<span className = "label">Status : </span>
<span className = "value">{list.status}</span>
</div>
<div className = "message">
<span className = "label">Message : </span>
<span className = "value">{list.message} </span>
</div>
</div>
);
}
}