时间戳

首页 > 解决方案 > 如何修复 React Native Flow Throw Error is Missing Null or Undefined

javascript - 如何修复 React Native Flow Throw Error is Missing Null or Undefined

问题描述

我正在上课React Native。我正在使用Atom并Nuclide用于Flow制作项目。我正在跟随讲师，但是在每节课之后，我都试图消除 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

如果有人可以帮助解决这个问题并解释为什么会发生这种情况，我想知道并确保这样做的其他人也想知道。谢谢。

标签： javascriptreactjsreact-nativejsxflowtype

解决方案

您可能正在使用您所在州的类型：

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

- 问号表示selectedPlace可能是null或undefined。所以flow希望你有selectedPlace定义的安全检查，最简单的方法可能是这样的：

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

或者，您可以取消标记可能键入 from selectedPlace。

推荐阅读