javascript - 错误：'list' 未定义 no-undef 'route' 未定义 no-undef

Question

我正在使用铁路 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>
        );
      }
    }

在渲染方法中的列表和路由处出现错误。谁能告诉我为什么在尝试所有可能的解决方案时会出现此错误

标签： javascriptreactjs

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 = ....;
  }