When I'm trying to run this code and the following error is shown to me.

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the Api component.

what should i do to fix the issue?

class Api extends Component {     

    constructor(props){        

        super(props)
        this.state = {            
            data: [],            
        }

    }
    
    async componentDidMount(){

        this.apiCall()
        
    }
    
    async apiCall() {
        let resp = await fetch(URL)
        let respJson = await resp.json()
        this.setState({data:respJson.data.statistics})
        
    }

}


export default function App(){
    const api = new Api()
    api.componentDidMount()

    return (
        <View>
            <ScrollView style={styles.center}>
            
            <Text>{api.state.data.time}</Text>
            
            </ScrollView>
        </View>
    )
} 

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        padding: 20,
        alignItems: 'center',
        padding: 15,
    },
    title: {
        padding: 30,
    },
})

After uses Federkun solution i get this new error, im kind new with JS so I'm little lost.

i tryied to use a async function but keep showing the error.

Failed building JavaScript bundle. SyntaxError: 
C:\Users\yup\Documents\GitHub\LEARN_REACT\App.js: Unexpected reserved word 'await'. (54:19) 52 | 53 | React.useEffect(() => { > 54 | let resp = await fetch(URL) | ^ 55 | let respJson = await resp.json() 56 | setData({data:respJson.data.statistics}) 

CodePudding user response：

Api isn't really a react Component. No render function. And you would need to use it as part of your jsx, not like that.

But, there's a useful primitive that can hold state: hooks.

function useApi() {
  const [data, setData] = React.useState()

  React.useEffect(() => {
    let resp = await fetch(URL)
    let respJson = await resp.json()
    setData({data:respJson.data.statistics})
  }, [])

  return data
}

Which you can use like

export default function App(){
    const data = useApi()

    return (
        <View>
            <ScrollView style={styles.center}>
            <Text>{data.time}</Text>
            </ScrollView>
        </View>
    )
} 

CodePudding user response：

This is an extension to @Federkun answer, adding a few other useful props and fixing some issues,

You can rewrite your useApi hook to,

function useApi() {
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);
  const [loading, setLoading] = React.useState(false);

  React.useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        let resp = await fetch('URL'); // your backend url goes here
        let respJson = await resp.json();
        setData(respJson);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

  return { data, error, loading };
};

and to use,

export default function App() {
  const { data, loading, error } = useApi();

  if (loading)
    return (
      <View style={styles.container}>
        <Text>loading...</Text>
      </View>
    );
  return (
    <View style={styles.container}>
      {data && (
        <Text>{JSON.stringify(data)}</Text>
      )}
      {error && (
        <Text>{JSON.stringify(error)}</Text>
      )}
    </View>
  );
}

If you are still confused, you can see it in action at this live snack