无法从渲染返回调用访问状态 - '无法读取属性'instructionList' of null'

Question

我正在自学 React，同时从事一个项目，该项目使用 react-google-maps 包生成从 A 到 B 方向的地图。地图本身工作正常，但我现在尝试打印相应的路线方向html 通过 return 方法，但无法将这些说明打印出来。

根据我通过 Google 和 StackOverflow 进行的研究，我认为我的问题可能是：

1. 尝试在返回方法中访问我的instructionList 时的“this”关键字的范围。在这种情况下 - 我需要输入什么来访问我的 instructionList 数组 <li> 项目？ 我也试过 <ol>{DirectionsService.route.state.instructionList}</ol> 和 <ol> and {DirectionsComponent.DirectionsService.route.state.instructionList}</ol> 也不起作用

2. 加载页面时，不一定收到api响应，因此我的instructionList为空，无法呈现。在哪种情况下 - 应该如何处理？

3. 我在语法中不知道的其他内容（我是 react 的初学者，而且 react-google-maps 包！）

在我的代码中，我在 state 中定义了一个名为指令列表的数组，其中包含从 A 到 B 的指令

if (status === google.maps.DirectionsStatus.OK) {
  this.setState({
    directions: { ...result },
    markers: true
  });
  this.setState({
    instructions: this.state.directions.routes[0].legs[0].steps
  });
  this.setState({
    instructionList: this.state.instructions.map(instruction => {
      return <li>instruction.instructions</li>;
    })
  });
}

然后我尝试在类返回方法中访问此数组 - 但错误消息显示 instructionList 未定义。

return (
  <div>
      <DirectionsComponent/>
      <div className="route instructions">
        <h1>{title}</h1>
        <ol>{this.state.instructionList}</ol>
      </div>
      <NotificationContainer />
  </div>

下面是一段更完整的代码，如果这样更容易识别问题。

class MyMapComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const {
      startLat,
      startLng,
      finishLat,
      finishLng,
      transportMode,
      title
    } = this.props;

    const DirectionsComponent = compose(
      withProps({
        googleMapURL:
          "https://maps.googleapis.com/maps/api/js?key=APIKEYGOESHERE", //removed=&callback=initMap
        loadingElement: <div style={{ height: `400px` }} />,
        containerElement: <div style={{ width: `100%` }} />,
        mapElement: <div style={{ height: `400px`, width: `400px` }} />
      }),
      withScriptjs,
      withGoogleMap,
      lifecycle({
        componentDidMount() {
          const DirectionsService = new google.maps.DirectionsService();

          DirectionsService.route(
            {
              origin: new google.maps.LatLng(startLat, startLng),
              destination: new google.maps.LatLng(finishLat, finishLng),
              travelMode: google.maps.TravelMode[transportMode],
              provideRouteAlternatives: true
            },
            (result, status) => {
              if (status === google.maps.DirectionsStatus.OK) {
                this.setState({
                  directions: { ...result },
                  markers: true
                });
                this.setState({
                  instructions: this.state.directions.routes[0].legs[0].steps
                });
                this.setState({
                  instructionList: this.state.instructions.map(instruction => {
                    return <li>instruction.instructions</li>;
                  })
                });
              } else {
                console.error(
                  `There was an error fetching directions for the specified journey ${result}`
                );
                NotificationManager.error(
                  "Journey cannot be retrieved, please try again",
                  "Error",
                  20000
                );
              }
            }
          );
        }
      })
    )(props => (
      <GoogleMap defaultZoom={3}>
        {props.directions && (
          <DirectionsRenderer
            directions={props.directions}
            suppressMarkers={props.markers}
          />
        )}
      </GoogleMap>
    ));
    return (
      <div>
        <DirectionsComponent />
        <div className="route instructions">
          <h1>{title}</h1>
          <ol>{this.state.instructionList}</ol>
        </div>
        <NotificationContainer />
      </div>
    );
  }
}
export default MyMapComponent;

错误信息当前为TypeError: Cannot read property 'instructionList' of null

我已经玩过代码并进行了相当多的研究，但我正在兜圈子。我确定解决方案很快，但由于我对 React/react-google-maps 的了解有限，我很难找到它，所以我非常感谢任何能够提供帮助的人:)

Answer 1

您还没有初始化组件的state。所以你不能访问state 的属性。您需要在constructor 中初始化它。

 constructor(props){
    super(props);
    this.state = { instructionList: [] };
  }

更新

您需要定义onChangeInstructionList 以在DirectionsComponent 中更改MyMapComponent 的instructionList。您还需要将DirectionsComponent 移动到MyMapComponent 的componentDidMount，以避免由于状态更改而导致无限循环。

class MyMapComponent {
  constructor(props){
    super(props);
    this.state = {
      instructionList: [],
    };

    this.onChangeInstructionList = this.onChangeInstructionList.bind(this);
  }

  componentDidMount() {
    const {startLat, startLng, finishLat, finishLng, transportMode} = this.props;
    const DirectionsComponent = compose(
      withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=APIKEYGOESHERE",//removed=&callback=initMap
        loadingElement: <div style={{ height: `400px` }} />,
        containerElement: <div style={{ width: `100%` }} />,
        mapElement: <div style={{height: `400px`, width: `400px` }}  />,
        onChangeInstructionList: this.onChangeInstructionList,
      }),
      withScriptjs,
      withGoogleMap,
      lifecycle({
        componentDidMount() {
          const DirectionsService = new google.maps.DirectionsService();

          DirectionsService.route({
            origin: new google.maps.LatLng(startLat, startLng),
            destination: new google.maps.LatLng(finishLat, finishLng),
            travelMode: google.maps.TravelMode[transportMode],
            provideRouteAlternatives: true
          }, (result, status) => {

            if (status === google.maps.DirectionsStatus.OK) {
              this.setState({
                directions: {...result},
                markers: true
              })
              this.setState({instructions: this.state.directions.routes[0].legs[0].steps});
              this.props.onChangeInstructionList(this.state.instructions.map(instruction => {
                return (<li>instruction.instructions</li>);
              }));
            } else {
              console.error(`There was an error fetching directions for the specified journey ${result}`);
              NotificationManager.error("Journey cannot be retrieved, please try again", "Error", 20000);
            }
          });
        }
      })
    )(props =>
      <GoogleMap
        defaultZoom={3}
      >
        {props.directions && <DirectionsRenderer directions={props.directions} suppressMarkers={props.markers}/>}
      </GoogleMap>
    );

    this.setState({
      DirectionsComponent,
    })
  }

  onChangeInstructionList(newList) {
    this.setState({
      instructionList: newList,
    });
  }

  render() {
    const {title} = this.props;
    const { DirectionsComponent, instructionList } = this.state;
    return (
      <div>
        <DirectionsComponent/>
        <div className="route instructions">
          <h1>{title}</h1>
          <ol>{instructionList}</ol>
        </div>
        <NotificationContainer />
      </div>

    )
  }
}
export default MyMapComponent