Question

TypeError：未定义不是一个对象 - React Native

2020-03-05

1211

react-native

我是开发新手，我遇到了 Undefined is not an object 错误。我在这里做错了什么？当我在控制台中记录 placeID 时，它返回值，但 selectedPlace 返回 undefined。谢谢。

const PlaceDetailScreen = props => {
  const [places, setPlaces] = useState([])

  useEffect(() => {
    const getPlaces = async () => {
      const result = await axios.get('https://tgr-admin.appspot.com/api/places')

      setPlaces(result.data)
    }

    getPlaces()
  }, [])

  const placeID = props.navigation.getParam('placeId')

  const selectedPlace = places.find(place => place._id === placeID)

  return (
    <ScrollView>
      <Image source={{ uri: selectedPlace.image }} style={styles.image} />
    </ScrollView>
  )
}

Answer 1

问题出在 selectedPlace 上，在 getPlaces 完成之前， places 是一个空数组，并且 .find 方法返回 undefined 。访问 selectedPlace 上未定义的图像道具会引发错误。在访问 selectedPlace 上的图像道具之前执行空检查。

const PlaceDetailScreen = props => {
  const [places, setPlaces] = useState([])

  useEffect(() => {
    const getPlaces = async () => {
      const result = await axios.get('https://#')

      setPlaces(result.data)
    }

    getPlaces()
  }, [])

  const placeID = props.navigation.getParam('placeId')

  const selectedPlace = places.find(place => place._id === placeID)
  // selectedPlace is undefined and places equals []
  // perform null check before accessing image prop
  return (
    <ScrollView>
      <Image source={{ uri: selectedPlace && selectedPlace.image }} style={styles.image} />
    </ScrollView>
  )
}

Answer 2

根据 Aadil Mehraj 的回答，使用 null 检查包装内容也有效。所以我可以在里面添加更多内容。

  return (
    <ScrollView>
      {selectedPlace && (
        <>
          <Image source={{ uri: selectedPlace.image }} style={styles.image} />

          <View style={styles.container}>
            <MarkdownView styles={markdownStyles}>
              {selectedPlace.content}
            </MarkdownView>
          </View>

        </>
      )}
    </ScrollView>
  )
}