React 項目變量未定義 no-undef

Question

這是我的第一個 React 項目，我遇到了這個問題：“./src/pages/EventsPage.jsx Line 64: 'events' is not defined no-undef”。 第 64 行是 {events}。變量事件在第 33 行聲明。但為什么沒有定義“事件”我不明白。

這是主要的反應組件。

import React, { Component } from "react";
import Events from "./../components/Events";

export default class EventsPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      eventData: {},
      isLoggedin: true
    };
  }

  componentDidMount() {
    fetch("http://localhost:5999/events/" + this.props.match.params.userId, {
      headers: {
        "Content-Type": "application/json"
      },
      method: "GET",
      mode: "cors",
      credentials: "include"
    })
      .then(response => response.json())
      .then(data => {
        if (data["code"] === 200) {
          console.log("OK");
          this.setState({
            eventData: data.events_data,
            isLoggedin: true
          });

          let events = this.state.eventData.map(event => (
            <Events
              name={event.name}
              image_url={event.image_url}
              start_time={event.start_time}
              end_time={event.end_time}
              price={event.price}
              age_from={event.age_from}
              age_to={event.age_to}
              x_coord={event.x_coord}
              y_coord={event.y_coord}
              status={event.status}
              status_id={event.status_id}
              members_total={event.members_total}
              members_needed={event.members_needed}
              owner_id={event.owner_id}
              address={event.address}
            />
          ));
        } else {
          console.log("NOT OK");
          this.setState({
            eventData: data.events_data,
            isLoggedin: false
          });
        }
      });
  }

  render() {
    return { events };
  }
}

Answer 1

您不能在componentDidMount方法中創建events變量並在render方法中訪問它。 您可以直接在 render 方法中創建events變量，因為它會在您fetch請求完成並更新狀態時重新運行。

還要確保在初始狀態下將eventData設置為空數組而不是空對象，否則嘗試在其上使用map方法時會出錯。

export default class EventsPage extends Component {
  constructor(props) {
    super(props);

    this.state = {
      eventData: [],
      isLoggedin: true
    };
  }

  componentDidMount() {
    fetch("http://localhost:5999/events/" + this.props.match.params.userId, {
      headers: {
        "Content-Type": "application/json"
      },
      method: "GET",
      mode: "cors",
      credentials: "include"
    })
      .then(response => response.json())
      .then(data => {
        if (data["code"] === 200) {
          console.log("OK");
          this.setState({
            eventData: data.events_data,
            isLoggedin: true
          });
        } else {
          console.log("NOT OK");
          this.setState({
            eventData: data.events_data,
            isLoggedin: false
          });
        }
      });
  }

  render() {
    let events = this.state.eventData.map(event => (
      <Events
        name={event.name}
        image_url={event.image_url}
        start_time={event.start_time}
        end_time={event.end_time}
        price={event.price}
        age_from={event.age_from}
        age_to={event.age_to}
        x_coord={event.x_coord}
        y_coord={event.y_coord}
        status={event.status}
        status_id={event.status_id}
        members_total={event.members_total}
        members_needed={event.members_needed}
        owner_id={event.owner_id}
        address={event.address}
      />
    ));

    return <>{events}</>;
  }
}