映射函数无法在 reactJS 应用程序中实现

Question

我是反应新手，并从教程中创建一个简单的应用程序。在本教程中，他们使用了无状态组件，而我则改为有状态组件。 但是我收到此错误

类型错误： 无法读取未定义的属性"映射">

我不知道我的代码哪里出错了。对我来说似乎没事。

---

消息列表.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.log(messageViews);
return (
<div>
<h1>List of Messages</h1>
{messageViews.map(msgList => (
<MessageView message={msgList.messages} />
))}
</div>
);
}
}
export default MessageList;

---

消息视图.js

import React, { Component } from 'react';
class MessageView extends Component {
render() {
const list = this.props.message;
console.log(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;

---

我尝试搜索为什么地图功能不起作用但无济于事。我对反应很陌生。有人可以指导我吗？

Answer 1

代码中存在一些基本问题

首先：状态消息不包含名为 messageView 的键，因此您会收到错误

第二：在消息视图组件中，您没有访问正确的键，即。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.log(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.log({ 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>
);
}
}

代码沙盒演示

Answer 2

类型错误：无法读取未定义的属性"map">

为了修复此错误，您应该像这样删除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是未定义的。

然后，当你使用像messageViews.map(msgList => (...))这样的map()方法时，程序将尝试调用未定义变量的map()方法。这就是为什么您收到错误的原因：无法读取未定义的属性"map">