[解決済み】Warning.Itが表示されるのはなぜですか？Functions are not valid as a React child?

質問

mapメソッドの結果を返すメソッドを呼び出そうとすると、以下のエラーが発生します。 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render が、なぜかわからない。以下は私のコードです。

renderAlbums() {
        return this.state.albums.map(album => <Text>{ album.title }</Text>);
    }

    render() {
        return (
            <View>
                { this.renderAlbums }
            </View>
        );
    }

しかし、上記のコードでは、問題がどこから来るのかがわかりません。しかし、私の render() メソッドで、私の map() メソッドを実行すると、すべてがうまくいきます。

render() {
  const c=this.state.albums.map(album => <Text>{ album.title }</Text>);
    return (
        <View>
            { c }
        </View>
    );
}

なぜうまくいかないのか理解したいです。レンダーを呼び出すと renderAlbums() メソッドはここで <View>{ this.renderAlbums }</View> .

そして、さらに奇妙に思えるのは、私が renderAlbums() このように <View>{ this.renderAlbums() }</View> を括弧で囲むと動作します。

解決方法は？

警告 関数はReactの子として有効ではありません。これは、レンダーからではなく、Component を返した場合に発生する可能性があります。

基本的に、Reactは React Elements をレンダリングします。

現在のスクリプトでは this.renderAlbums は 関数参照 を返さない React Element .Function自体はreact要素ではないので、Reactはこの関数をレンダリングできません。 this.renderAlbums .

<View>
   { this.renderAlbums }
</View>

をクリックします。

<View>
   { this.renderAlbums() } //it will return react element which can be rendered.
</View>