我无法理解如何从本地JS文件访问数据。我已经上下阅读了React文档,但是我一直陷在这个问题上。我的状态/道具逻辑一定存在缺陷吗?
import announcementData from "./AnnouncementData.js"
class Detail extends Component {
constructor(props) {
super(props);
this.state = {
announcement: [
{
id: 0,
...
}
async fetchDetails(id) {
let response = announcementData;
this.state.announcement.map(response, (value, key) => {
this.setState({
[value]: key
}).catch(error => {
this.setState({
error: error.message
});
});
});
}
async componentDidMount() {
const { match } = this.props;
await this.fetchDetails(match.params.id);
}
render() {
const detail = {
id: this.state.announcement.id,
title: this.state.announcement.title,
site_id: this.state.announcement.site_id,
content: this.state.announcement.content,
status: this.state.announcement.status,
scheduled_at: this.state.announcement.scheduled_at,
created_at: this.state.announcement.created_at,
categories: this.state.announcement.categories,
members: this.state.announcement.members
};
return (
<div>
<ListGroup>
<Announcement
id={detail.id}
title={detail.title}
site_id={detail.site_id}
content={detail.content}
status={detail.status}
scheduled_at={detail.scheduled_at}
created_at={detail.created_at}
categories={detail.categories}
members={detail.members}
/>
</ListGroup>
</div>
);
}
}
const Announcement = ({id, title, site_id, content, status, scheduled_at, created_at, categories, members}) => {
return (
<div>
<ListGroupItem>ID: {id}</ListGroupItem>
<ListGroupItem>Title: {title}</ListGroupItem>
<ListGroupItem>Site ID: {site_id}</ListGroupItem>
<ListGroupItem>Content: {content}</ListGroupItem>
<ListGroupItem>Status: {status}</ListGroupItem>
<ListGroupItem>Scheduled at: {scheduled_at}</ListGroupItem>
<ListGroupItem>Created at: {created_at}</ListGroupItem>
<ListGroupItem>Categories: {categories}</ListGroupItem>
<ListGroupItem>Members: {members}</ListGroupItem>
</div>
);
};
export default Detail;
我正在尝试从本地文件(现在)发布一个数组中的详细信息,以供UI显示。有了这段最少的代码,我就可以显示没有数据的“公告”功能,如下所示:
ID:
Title:
Site ID:
Content:
Status:
Scheduled at:
Created at:
Categories:
Members:
我需要显示来自.js文件的实际数据。 这应该是一个非常基本的问题,但是我是一个初学者。任何帮助表示赞赏。谢谢!
AnnouncementData.js:
const announcementData = [
{
id: 0,
title: "John Doe",
site_id: "my business",
content: "I have a new business!",
status: true,
created_at: "14/03/2019",
updated_at: "24/04/2019",
categories: [{ id: 0, name: "John Doe" }],
members: [{ id: 1, name: "Jane Doe", photo_url: "jane.png" }]
},
export default announcementData;
答案 0 :(得分:0)
您应该将fetchDetails
函数更改为以下形式:
async fetchDetails(id) {
this.setState({
announcement: announcementData.find(v => v.id === id)
});
}
答案 1 :(得分:0)
我不确定我是否正确理解了您的问题,但我认为您可以做到
constructor(props) {
super(props);
this.state = {
announcement: announcementData
}
}
这样做,您将为公告数据设置默认状态