Question

我无法理解如何从本地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;

Answer 1

您应该将fetchDetails函数更改为以下形式：

async fetchDetails(id) {
  this.setState({
    announcement: announcementData.find(v => v.id === id)
  }); 
}

Answer 2

我不确定我是否正确理解了您的问题，但我认为您可以做到

constructor(props) {
    super(props);
    this.state = {
      announcement: announcementData
    }
  }

这样做，您将为公告数据设置默认状态

如何将本地JS文件中的数据附加到ReactJS中的状态？

2 个答案: