Question

我正在渲染数据数组。它可以与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>
    );

我希望一次只能在屏幕上渲染一个项目。用户单击按钮后，将渲染第二个项目。

Answer 1

检查数据的空值。如果value为null或未设置，则不显示任何内容，否则显示数据。

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>
    );
  }

Answer 2

您可以通过使用条件渲染来确保数据为空，以确保仅在填充数据后才渲染数据

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>
    );
}

React Native中的数组渲染（未定义不是对象）

2 个答案: