Question

我正在使用Railway API构建Web应用程序，在提交火车编号时，我试图显示数据，但出现上述错误。实际上，我在获取数据时使用了if else条件。

下面是代码。

  import React, { Component } from "react";

    export default class TrainRoute extends Component {
      constructor(props) {
        super(props);
        this.state = { trainNumber: "", trainRouteList: "" };
        this.onChange = this.onChange.bind(this);
        this.onSubmitForm = this.onSubmitForm.bind(this);
      }

      onChange(e) {
        this.setState({ [e.target.id]: e.target.value } );
      }

      onSubmitForm(e) {
        e.preventDefault();
        fetch(
          `https://api.railwayapi.com/v2/route/train/${
            this.state.trainNumber
          }/apikey/sch9lj34uy/`
        )
          .then(res => res.json())
          .then(data => {
            this.setState({ trainRouteList: data }, () =>
              console.log(this.state.trainRouteList)
            );
          });
        this.setState({ trainNumber: "" });
      }

      render() {
        const { trainRouteList } = this.state;

        if (!trainRouteList) {
          const list = <div>No Trains Details to display</div>;
          const route = <div>No Routes to display</div>;
        } else {
          const list = (
            <div>
              <table>
                <tbody>
                  <tr>
                    <td>Train Name :</td>
                    <td> {trainRouteList.train.name} </td>
                  </tr>
                  <tr>
                    <td>Train Number :</td>
                    <td> {trainRouteList.train.number} </td>
                  </tr>
                  <tr>
                    <td>Class :</td>
                    <td>
                      {trainRouteList.train.classes.map(trainClass => (
                        <span key={trainClass.code}>{trainClass.code},</span>
                      ))}{" "}
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          );

          const route = trainRouteList.route.map(routeInfo => (
            <table>
              <tbody>
                <tr>
                  <td>Station :</td>
                  <td> {routeInfo.station.name} </td>
                </tr>
                <tr>
                  <td>Departure Time :</td>
                  <td> {routeInfo.schdep} </td>
                </tr>
                <tr>
                  <td>Arrival Time :</td>
                  <td> {routeInfo.scharr} </td>
                </tr>
              </tbody>
            </table>
          ));
        }

        return (
          <div>
            <div className="container">
              <form
                onSubmit={this.onSubmitForm}
                className="col-md-8 col-md-offset-4"
              >
                <div className="row">
                  <div className="col-md-3">
                    <input
                      type="number"
                      className="form-control input-lg"
                      placeholder="Train Number"
                      id="trainNumber"
                      value={this.state.trainNumber}
                      onChange={this.onChange}
                    />
                  </div>

                  <div className="col-md-1">
                    <button type="submit" className="btn btn-warning btn-lg">
                      Check Route
                    </button>
                  </div>
                </div>
              </form>
            </div>
            <div className="card card-fluid">
              <div className="container">
                {list}
                <h3>Train Route</h3>
                {route}
              </div>
            </div>
          </div>
        );
      }
    }

在列表中获取错误并在render方法中路由。任何人都可以告诉我为什么在尝试所有可能的解决方案时都会收到此错误

Answer 1

这是因为list和route是块级变量，并且您试图在块外访问它们。

解决方法是，在外部定义这些变量，然后更新if和else块中的值，这样我们就可以访问render方法内部的任何位置。像这样：

render() {
  const { trainRouteList } = this.state;
  let list, route;

  if (!trainRouteList) {
    list = <div>No Trains Details to display</div>;
    route = <div>No Routes to display</div>;
  } else {
    list = ....;
    route = ....;
  }

错误：“列表”未定义no-undef“ route”未定义no-undef

1 个答案: