如何使用React Native中的函數渲染組件

Question

嗨，我是React Native的新手，可以通過在render中調用一個函數來嘗試渲染組件，但是它似乎不起作用。

我的功能：

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()}調用它時可以獲取新元素。 否則您正在做{undefined}因為您當前沒有返回值。