данные не отображаются с использованием плоского списка

Question

Я делаю простое мобильное приложение с React Native. Я пытаюсь организовать код, чтобы использовать реквизиты. Я хочу визуализировать массив, поэтому отправил его через реквизиты, чтобы компоненты Items могли его использовать. Однако это не отображается в приложении. Я не знаю почему.

Не могли бы вы помочь мне исправить этот код?

большое спасибо

это код

    import React, { Component } from 'react';
    import HomePage from './HomePage.js'
    import {
      SafeAreaView,
      StyleSheet,
      ScrollView,
      View,
      Dimensions,
      Text,
      StatusBar,
      Image
    } from 'react-native';
    
    
    
    
    class App extends Component {
      render() {
        
        return (
        
          <>
         
      <HomePage/>
            
          </>
        );
      }
    }
    
    export default App;


    import React, { Component } from 'react';
    import Items from './Items'
    import {
      FlatList,
      TouchableOpacity,
      SafeAreaView,
      StyleSheet,
      ScrollView,
      View,
      Dimensions,
      Text,
      StatusBar,
      Image
    } from 'react-native';
    
    import {
      Header,
      LearnMoreLinks,
      Colors,
      DebugInstructions,
      ReloadInstructions,
    } from 'react-native/Libraries/NewAppScreen';
    
    
    const DATA = [
      {
        id: "1",
        title: "First Item",
      },
      {
        id: "2",
        title: "Second Item",
      },
      {
        id: "3",
        title: "Third Item",
      },
    ];
    class HomePage extends Component {
      constructor(props) { 
        super(props); 
        this.state = { 
          activities: []
        }; 
    } 
    
    async componentDidMount() {
      try {
        const response = await fetch('http://www.boredapi.com/api/activity/');
        const data = await response.json();
        this.setState({ activities: data.results});
    
      } catch (error) {
        this.setState({ error: error.message });
      }
    }
      render() {
        
        return (
          <>
          <View style={styles.container}>
          <View style={styles.header} > 
          <Image  style={styles.image} source={require('./bg.jpeg')} />
            <Text style={styles.postionnedText}>  Healty Recipes</Text>
          </View>
          <View style={styles.body} > 
      <Items props={this.state.activities} />
          </View>
          </View>
          </>
        );
      }
    }
    export default HomePage;

    import React, { Component } from 'react';
    
    import {
      FlatList,
      TouchableOpacity,
      SafeAreaView,
      StyleSheet,
      ScrollView,
      View,
      Dimensions,
      Text,
      StatusBar,
      Image
    } from 'react-native';
    
    import {
      Header,
      LearnMoreLinks,
      Colors,
      DebugInstructions,
      ReloadInstructions,
    } from 'react-native/Libraries/NewAppScreen';

    class Items extends Component {
      render() {
        const {DATA} = this.props;   
        return (
           
          <>
          <View> 
          <FlatList
            data={DATA}
            renderItem={({item})=>{
           return <Text style={styles.text}>  {item.activity}</Text>
            }}
            keyExtractor={item => item.id}
          />
          <Text> ddd</Text>
          </View>
       
          </>
        );
      }
    }
    export default Items;

Answer 1

Вы обращаетесь не к тому реквизиту, вы должны отправить реквизит как

<Items DATA={this.state.activities} />

, тогда все будет работать должным образом.