为什么我收到警告：函数作为 React 子节点无效？

IT技术 reactjs react-native
2021-05-19 20:25:12

当我尝试调用返回 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()这里调用 render方法时<View>{ this.renderAlbums }</View>。

对我来说更奇怪的是，当我尝试用括号调用renderAlbums()类似的东西时<View>{ this.renderAlbums() }</View>，它会起作用。

4个回答

警告：函数作为 React 子节点无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况

基本上，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>

this.renderAlbums指的是实际的函数本身，而this.renderAlbums()实际执行的是函数，因此代表了函数的返回值。

我想我应该分享我对这个错误的经验，我的代码：

const PageMakeup = loading ? ThemLoading : (
<div>....</div>
);

这里的问题是 ThemLoading 包含在其他文件中，应该是<ThemLoading />；并且这个错误被清除了！

关于你的错误：回调函数和返回函数是不同的，在你的情况下是返回函数this.renderAlbums();，而不是this.renderAlbums；

再会！

而不是指向函数返回整个函数

 return (
            <View>
                { this.renderAlbums() }
            </View>
        );
其它你可能感兴趣的问题
上一篇为什么我的 Ender 3 在打印中期会自动重启？ 下一篇NODE_ENV === 'production' 之外的缩小代码。这意味着 Redux 的开发构建速度较慢