用 json 数据填充平面列表，在本机反应中，不可能？

Question

I'm very new at react native, just starting to get the hang of it. Playing around with fetching json data from my dummy api and populating views with it.

Currently using a flatlist, which works fine! Except it doesn't work when I give it a very basic json array of items.

This is how the basic json data array looks:

[{"Note 1": "This is note number 1."}, {"Note 2": "This is note number 2."}, {"Note 3": "This is note number 3."}]

This is my very temporary and basic code I'm playing around with:

 render() {
        let apiData = fetch("address of my api which is not relevant, it works")
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                return responseJson;
            })
            .catch((error) => {
                console.error(error);
            });
        console.log(apiData);
        return (
            <View style={styles.notesContainer}>
                <FlatList
                    data={apiData}
                    renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
                />
            </View>
        );
    }

The json array is very simple and just contains 3 objects. If I create a list of random stuff (as noted in the documentation with "Key: value", the flatlist works fine.

Can it really be true I need to handle a basic json array in some fashion before I can set is as a data source for a flatlist?

Answer 1

Use componentDidMount for fetching data from API and use state to store apiData.

So your code will be like:

   constructor () {
    super(props);
    state = {
         apiData:[]
    };

  }

 componentDidMount =()=>{
        fetch("address of my api which is not relevant, it works")
            .then((response) => response.json())
            .then((responseJson) => {
                console.log(responseJson);
                this.setState({apiData: responseJson});
            })
            .catch((error) => {
                console.error(error);
            });
       
  } 

  render() {
        return (
            <View style={styles.notesContainer}>
                <FlatList
                    data={this.state.apiData}
                    renderItem={({ item }) => <Text style={styles.item}>{item.key}</Text>}
                />
            </View>
        );
    }