Как исправить ошибку React Native Flow Throw, которая отсутствует или не определена

Question

Я учусь на React Native.Я использую Atom с Nuclide и Flow для создания проектов.Я следую за инструктором, но после каждого урока я пытаюсь устранить все ошибки, которые бросает в меня Флоу.Но я действительно застрял на этой части.Я получаю это сообщение об ошибке:

Невозможно получить prevState.selectedPlace.key, поскольку ключ свойства отсутствует в null или не определен.

Ниже приведен мой код, и я выделил, в какой строке я получаю сообщение об ошибке, которое происходит в функции placeDeletedHandler.

/**
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, View } from 'react-native';

import PlaceInput from "./src/components/PlaceInput/PlaceInput.js";
import PlaceList from "./src/components/PlaceList/PlaceList.js";
import PlaceDetail from "./src/components/PlaceDetail/PlaceDetail.js"

type Props = {};
type State = {
  places: Array<Object>,
  selectedPlace: ?{
    key: string,
    name: string,
    image: Image
  }
};
export default class App extends Component<Props, State> {
  state = {
    places: [],
    selectedPlace: null,
  };

  placeAddedHandler = (placeName: string) => {
    this.setState(prevState => {
        return {
            places: prevState.places.concat({
              key: String(Math.random()),
              name: placeName,
              image: {
                uri: "https://cdn.newsapi.com.au/image/v1/f08d8ccc83fbc2d08529aea69890ad4d?width=1024"
              }
            })
        };
      });
  };

  placeDeletedHandler = () => {
    this.setState(prevState => {
        return {
          places: prevState.places.filter(place => {
              return place.key !== prevState.selectedPlace.key; <-- Error on this line
            }),
            selectedPlace: null
        };
      });
  };

  modalClosedHandler = () => {
    this.setState({
      selectedPlace: null
    });
  };

  placeSelectedHandler = (key : string) => {
    this.setState(prevState => {
      return {
        selectedPlace: prevState.places.find(place => {
          return place.key == key;
        })
      };
    });

  };

  render() {
    return (
      <View style={styles.container}>
        <PlaceDetail
          selectedPlace={this.state.selectedPlace}
          onItemDeleted={this.placeDeletedHandler}
          onModalClosed={this.modalClosedHandler}
        />
        <PlaceInput onPlaceAdded={this.placeAddedHandler}/>
        <PlaceList
          places={this.state.places}
          onItemSelected={this.placeSelectedHandler}
        />
      </View>
      );
    }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 26,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },


});

Я уверен, что у кого-то еще могут быть подобные проблемы.И я часами копаюсь в интернете, пытаясь ее решить.Самой близкой вещью, которую я нашел, была эта ссылка: https://github.com/facebook/flow/issues/6954

Если кто-то может помочь решить эту проблему и объяснить, почему это происходит, я хотел бы знать и уверен, что другие, делающие это, хотели бы знать также.Спасибо.

Answer 1

Вы используете , возможно, введите в вашем штате:

type State = {
   selectedPlace: ?{ key: string, ...}
   ...
  }

- вопросительный знак означает, что selectedPlace может быть null или undefined.Так что flow ожидает, что у вас будет проверка безопасности, что определено selectedPlace, самый простой способ может быть что-то вроде:

return prevState.selectedPlace && place.key !== prevState.selectedPlace.key

Или вы можете отменить пометку, может быть, набрать с selectedPlace.