Question

我正在用React Native制作一个简单的移动应用程序。我正在尝试整理代码，因此可以使用道具。我想渲染一个数组，所以我通过props发送了它，以便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} />

然后它将按预期工作。

数据未使用平面列表呈现

1 个答案: