React Native接入react-navigation报_this.setState is not a function求助

错误原因 #

你当前的HomeScreen是函数式组件，函数组件不存在this指向，也没有类组件专属的this.setState方法，所有状态管理需要用你已经导入的useState Hook完成。同时你直接在组件顶层调用请求方法会导致重复触发请求，需要用useEffect控制执行时机。

具体修改步骤 #

• 替换原有的非响应式状态声明，用useState声明reports状态
  你原来写的

  const [data, setData] = useState([]);
  const state  = { reports: [] }
  

  直接替换为

  const [reports, setReports] = useState([]);
  

  不需要额外声明普通的state对象，也不需要没用的data状态，如果你需要加载状态可以保留isLoading相关声明。
• 修改请求方法里的状态更新逻辑，把this.setState替换为setReports
• 把请求方法调用放到useEffect中，控制仅在组件首次挂载时执行一次，避免无限重复请求
• 修改mapMarkers方法，直接遍历响应式的reports数组即可

修改后的完整HomeScreen代码 #

function HomeScreen() {
  const [isLoading, setLoading] = useState(true);
  // 用useState声明reports响应式状态
  const [reports, setReports] = useState([]);

  const mapMarkers = () =>  {
    // 直接遍历响应式的reports数组
    return reports.map((report) => <Marker
      key={report.anum}
      coordinate={{ latitude: report.lat, longitude: report.lon }}
      title={report.name}
      description={report.image}
    >
    </Marker >)
  }
 
  const getMovies = async () => {
    fetch('https://xxxxx.cfm?d3d2fcs1d')
      .then(res => res.json())
      .then(data => {
        // 调用useState返回的更新方法设置状态
        setReports(data.reports);
        setLoading(false);
        console.log(data);
      })
      .catch(console.error)                
  }

  // 仅在组件首次挂载时调用一次请求
  useEffect(() => {
    getMovies();
  }, []);

  return (
    <View style={styles.container}>
      <MapView
        style={{ ...StyleSheet.absoluteFillObject }}
        initialRegion={{
          latitude: 34.8527370,
          longitude: -82.3933179,
          latitudeDelta: .01,
          longitudeDelta: .01
        }}  apikey={GOOGLE_MAPS_APIKEY} >
        {mapMarkers()}
      </MapView>
    </View>
  ); 
}

剩余的DetailsScreen、App组件以及样式代码不需要改动，直接复用你原来的即可。

内容的提问来源于stack exchange，提问作者Chris Bizzell