javascript - React this.props.children.apply 不是一个函数

Question

我正在制作一个未声明的 react 应用程序来管理我的应用程序的状态，该应用程序是一个简单的注释 CRUD。

我有一个 NoteList 组件来呈现注释列表。 这是我在 NoteList 组件中的 render() 函数:

render() {
        return (
            <Subscribe to={[NoteContainer]}>
                {noteContainer => (
                    noteContainer.state.isLoaded ?
                        (
                            noteContainer.state.notas.map((note, i) => {
                                return (<Note note={note} index={i} onRemoveNote={this.removeNote} onEditNote={this.saveEditNote} key={i}></Note>)
                            })
                        )
                        :
                        (
                            <div>Loading Notes...</div>
                        )
                    )}
                )}
            </Subscribe>
        )
}

但是，当我加载页面时，出现以下错误:

this6.props.children.apply is not a function

在 Chrome 控制台中，有以下描述:

The above error occurred in the component: in Consumer (created by Subscribe) in Subscribe (at NoteList.js:19) in NoteList (at App.js:160) in Provider (created by Consumer) in Consumer (created by Provider) in Provider (at App.js:159) in App (at src/index.js:7)

我不知道这个错误的根源是什么，如果有人能给我任何帮助，我将不胜感激!

提前致谢，祝您有愉快的一天!

Answer 1

<Subscribe />的 child 是一个返回子数组的函数，这就是错误的原因。 要检查它，请在 <Subscribe /> 内查看。 ，你可以这样做console.log(this.props.children)你会看到它是一个数组，你不能在数组中使用 apply ，你需要循环并将其应用到每个 child

this.props.children.map(children => children.apply())