React调用setState于未挂载组件警告及await语法错误如何解决

问题原因 #

第一个报错（setState调用未挂载组件） #

你完全错误地使用了React组件类：

• React的组件（不管类组件还是函数组件）都不能手动new实例、手动调用生命周期方法，必须由React框架来接管组件的渲染、挂载、生命周期执行流程
• 你手动创建的Api类实例没有被React渲染挂载，所以调用setState就会触发该警告

第二个报错（意外的保留字await） #

await只能在标记了async的函数内部使用，你直接在useEffect的普通回调函数里写await自然会报语法错误，同时要注意useEffect不能直接传入async函数（因为useEffect需要返回清理函数，async函数返回的是Promise，会导致清理逻辑异常），需要在useEffect内部定义async函数再执行。

修复方案 #

直接把数据请求逻辑写到App组件里即可，完全不需要额外定义那个Api类组件：

import React, { useState, useEffect } from 'react'
import { View, ScrollView, Text, StyleSheet } from 'react-native'

// 替换成你自己的请求地址
const URL = '你的实际接口地址'

export default function App(){
    // 定义存储数据的state
    const [data, setData] = useState({})

    useEffect(() => {
        // 内部定义async函数执行请求
        const fetchData = async () => {
            try {
                let resp = await fetch(URL)
                let respJson = await resp.json()
                setData(respJson.data.statistics)
            } catch (err) {
                console.error('请求出错:', err)
            }
        }
        fetchData()
    }, []) // 空依赖数组表示只在组件首次挂载后执行一次

    return (
        <View>
            <ScrollView style={styles.center}>
                {/* 加可选链判断和兜底提示，避免数据未返回时读取属性报错 */}
                <Text>{data?.time || '加载中...'}</Text>
            </ScrollView>
        </View>
    )
} 

const styles = StyleSheet.create({
    center: {
        // 补充你需要的center样式即可
    },
    container: {
        flex: 1,
        backgroundColor: '#fff',
        padding: 20,
        alignItems: 'center',
        padding: 15,
    },
    title: {
        padding: 30,
    },
})

如果后续需要复用这个请求逻辑，可以抽成自定义Hook，比类组件更简洁易用：

// 抽成自定义Hook复用
const useApiStatistics = () => {
  const [data, setData] = useState({})
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const fetchData = async () => {
      try {
        const resp = await fetch(URL)
        const respJson = await resp.json()
        setData(respJson.data.statistics)
      } catch (err) {
        console.error('请求异常', err)
      } finally {
        setLoading(false)
      }
    }
    fetchData()
  }, [])

  return { data, loading }
}

// 组件内使用
export default function App(){
  const { data, loading } = useApiStatistics()
  return <Text>{loading ? '加载中' : data.time}</Text>
}

内容的提问来源于stack exchange，提问作者Matheus Valadares