反应this.props.children.apply不是一个函数

Question

I'm making a react app with unstated to manage the state of my app, the application is a simple CRUD of notes.

I have a NoteList component to render the list of Notes. This is my render() function in NoteList Component:

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>
        )
}

However, when i load the page, i get the following error:

this6.props.children.apply is not a function

And in the chrome console the next description:

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)

I have no clue on what could be the source of this error, if anyone can give me any help i would appreciate it!

Thanks in advance, have a nice day!

Answer 1

The children of <Subscribe /> is a function that returns array of childrens, thats why the error. To check it, inside <Subscribe /> , you could do console.log(this.props.children) and you will see that it's an array, you can't use apply in an array, you need to loop through and apply it to each children

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