Question

当我通过React Native读取数据时，为什么我会undefined is not an object (evaluating 'this.props.artist.name')？

this.props.artist.name无法访问name，我该怎么办？我想使用此模块播放音频文件，我想从我的数据中读取，与（https://github.com/devnacho/react-native-music-player/blob/master/app/components/artists/ArtistShow.js）相同我有3页，1：路由器第2页：ArtistShow 3：播放器

这是我的数据：

    const artist = [
      {
        name: "Soda Stereo",
        background: "http://cnnchile.com/uploads/imagenes/14344020424867_breaking.jpg",
        songs: [
          {
            title: "Un Misil En Mi Placard",
            album: "Comfort y Musica Para Volar",
            url: "https://www.freesound.org/data/previews/208/208096_3767678-lq.mp3",
          }
        ]
      }
    ]

这是我的艺术家秀代码：

class ArtistShow extends Component {


  renderStickyHeader() {
    return (
      <View style={styles.stickySection}>
        <Text style={styles.stickySectionTitle}>{this.props.artist.name}</Text>
      </View>
    );
  }

  render() {
    const { onScroll = () => { } } = this.props;
    return (
      <View>
        <ParallaxScrollView
          style={{ position: "absolute", top: 0, bottom: 0, left: 0, right: 0, width: window.width, height: window.height }}
          parallaxHeaderHeight={PARALLAX_HEADER_HEIGHT}
          stickyHeaderHeight={STICKY_HEADER_HEIGHT}
          onScroll={onScroll}
          renderStickyHeader={this.renderStickyHeader.bind(this)}
        >

        </ParallaxScrollView>
        <View style={styles.headerClose}>
          <Icon onPress={Actions.pop} name="chevron-left" size={15} color="#fff" />
        </View>
      </View>
    );
  }
}

module.exports = ArtistShow;

这是路由器页面：

class Example extends React.Component {
    render() {
        return (
            <Router createReducer={reducerCreate}>
                <Scene key="root">
                    <Scene key="artistahow" component={ArtistShow} title="ArtistShow" initial />
                    <Scene key="player" component={Player} title="Player" />
                </Scene>
            </Router>
        );
    }
}

export default Example;

Answer 1

对于react-native-router-flux，道具会动态Actions.scenekey(obj)或静态传递到导航树中：

<Scene key='scenekey' component={MyComponent} artist={yourArtistObj} />

由于您的场景初始，您应该使用第二种方法。但是，这不建议使用，也没用。如果您要像这样定义它，则应该更好地初始化Component中的artist变量。 你不必将它作为道具传递。

Answer 2

您需要确保将艺术家作为属性传递给此组件，并且艺术家是一个数组，因此您必须执行类似this.props.artist[0].name的操作，这将为您提供第一个艺术家＆＃39;的名字。

当我正在阅读json数据时，“未定义不是对象”

2 个答案: