如何在React Native中使用函数渲染组件

Question

嗨，我是新来的反应本机和尝试渲染组件调用一个函数内渲染，但它似乎不工作。

我的职能：

renderData = () => {
    this.state.data.map(x => {
      return (
         <View>
           <Text> {x.data.title} </Text>
         </View>
       )
    });
  };

如果我这样做，效果会更好：

  render() {

    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Enter Username</Text>
        {this.state.data.map(x => {
          return <Text style={styles.bodyText}> {x.data.title} </Text>;
        })}
      </SafeAreaView>
    );
  }
}

但不是这个：

  render() {

    return (
      <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Enter Username</Text>
        {this.renderData()}
      </SafeAreaView>
    );
   }
  }

我不明白为什么第二个代码不起作用

Answer 1

这是因为您没有从renderData返回任何要实际渲染的内容。添加返回语句：

return this.state.data.map(x => {
  return (
     <View>
       <Text> {x.data.title} </Text>
     </View>
   )
});

实际上，您必须返回新的映射元素，以便在{this.renderData（）}中调用它时获得新元素。或者，由于当前没有返回值，所以您正在执行{未定义}。