react-native - this.props.data.map 出现未定义错误

Question

在执行代码时

export default class Slides extends React.Component {
  renderSlides() {
    return this.props.data.map((slide)=> {
      return (
        <View key={slide.text}>
          <Text> {slide.text} </Text>
        </View>
      );
    });
  }

  render() {
    return (
      <ScrollView
        horizontal
        style= {{ flex: 1 }}
      >
        { this.renderSlides() }
      </ScrollView>
    );
  }
}

错误是this.props.map() 错误

标签： react-native

Answer 1

首先，您需要将数据传递给 Slides 组件

 import React from 'react';
 import { Text, View } from 'react-native';
 import Slides from "../components/Slides";
 const SLIDE_DATA = [ { text: 'Welcome to JobApp' }, { text: 'Use this to get a Job' }, { text: 'Set your location, then swipe away' } ] 

 export default class WelcomeScreen extends React.Component {
   render() { 
      return(
          <Slides data = {SLIDE_DATA}/> 
      ); 
     } 
} 

您可以使用幻灯片组件中的 this.props.data 获取数据