Question

有人可以帮助我理解为什么renderPosesList（）无法呈现“文本”的原因。如果取消注释render（）中的“文本”，我将获得渲染的值。 this.renderPosesList（）在控制台中打印数据，但我在屏幕上看到空白页。我在其他帖子中添加了“关键”属性，但没有成功。 最终，我将用自定义组件替换Text。

renderPosesList() {
    return this.state.posesDictionary.forEach((pose, index) => {
    console.log("pose > " + index + " > " + pose.key);
    <Text key={index}>{pose.key}</Text>;
  });
}

render() {
  if (this.state.posesDictionary.length > 0) {
    let p = this.state.posesDictionary[0];
    return (
      <View>
        {/* <Text>{p.key}</Text> */}
        {this.renderPosesList()}
      </View>
    );
  } else {
    return (
      <View>
        <Text> Loading..</Text>
      </View>
    );
  }
}

Answer 1

renderPosesList() {
    return this.state.posesDictionary.map((pose, index) => {
    console.log("pose > " + index + " > " + pose.key);
    return <Text key={index}>{pose.key}</Text>;
  });
}

您错过的是您没有从map函数返回任何内容，除非您已将其作为react节点的子节点（在这种情况下为

）返回，否则您就无法在视图中看到任何内容。

Answer 2

forEach不使用.map返回值来返回HTML标记

 renderPosesList = () => {
    return this.state.posesDictionary.map((pose, index) => {
      console.log("pose > " + index + " > " + pose.key);
      return(
      <Text key={index}>{pose.key}</Text>
      );
    });
  }

在react-native中的循环内渲染组件

2 个答案: