IT技术 - React Native 中的数组渲染（未定义不是对象） - 吾爱随笔录

我正在渲染一组数据。它适用于 map 函数，但如果我尝试明智地调用 item ，则会出现错误。 未定义不是对象（评估'data[0].uri'）

这不起作用

render () {
    const data  = this.state.data;
    const selectedIndex = this.state.selectedIndex;
    return (
      <View style={styles.text}>

            <Card
              title="Profiling Question "
              image={{ uri: data[0].uri }}
            >
              <Text style={{ marginBottom: 10 }}>
                {data[0].text}
              </Text>
              <Button
                onPress={this.updateIndex}
              />
            </Card>

      </View>
    );
  }

但这很好用：

return (
      <View style={styles.text}>
      {data.map((item) => {
        return (
            <Card
              title="Profiling Question "
              image={{ uri: item.question_image }}
            >
              <Text style={{ marginBottom: 10 }}>
                {item.question_text}
              </Text>
              <Button
                onPress={this.updateIndex}
              />
            </Card>
          )})}
      </View>
    );

我希望一次只在屏幕上渲染一个项目。一旦用户单击按钮，就会呈现第二个项目。

render () { const data = this.state.data; const selectedIndex = this.state.selectedIndex; return ( <View style={styles.text}> <Card title="Profiling Question " image={{ uri: data[0] ? data[0].uri: null }} > <Text style={{ marginBottom: 10 }}> {data[0] ? data[0].text: ''} </Text> <Button onPress={this.updateIndex} /> </Card> </View> ); }

render() { const data = this.state.data; const selectedIndex = this.state.selectedIndex; return ( <View style={styles.text}> {data && data[selectedIndex] && <Card title="Profiling Question " image={{uri: data[selectedIndex].question_image}} > <Text style={{marginBottom: 10}}> {data[selectedIndex].question_text} </Text> <Button onPress={this.updateIndex} /> </Card> } </View> ); }