Невозможно отобразить массив из mon goose в React

Question

Я хочу отобразить массив, который находится в понедельник goose Схема: (dataNotes)

const {Schema, model} = require("mongoose");

const noteSchema= new Schema({
    idNote: {type: String, required: true, unique: true},
    dataNotes: [{
        title: {type:String, isRequired: true},
        authors: [{type: String, fecha: Date}] }]

}, {timestamps:true});

module.exports = model("noteSchema", noteSchema);

из бэкэнда, на который я отвечаю данным:

noteCtrl.getNoteInfo = async (req, res) => {
    await noteSchema.findOne({idNota: req.body.id})
        .then((response)=>{
            console.log(response)
            res.send(response);
        })
    console.log(req.body)

}

Здесь данные отправляются нормально, как объект

И мой интерфейс имеет:

    ObtNofNotes = async () => {
        await axios.post("http://localhost:4000/api/users/notes", {
            id:
                JSON.parse(localStorage.getItem("user")).user
        })
            .then((res) => {
                console.log("Notes data " + res.data.dataNotes)
                //It only returns [object Object] for each array
                return this.notesArray(res.data.dataNotes)
            })
            .catch((err) => console.log(err));
    }

    notesArray= (n) => {
        n.map(nm => {
            console.log(nm)
            //it returns the arrays just fine
            return (<li>{nm.dataNotes[0][0]}</li>)
        })
    }

, но когда я хочу визуализировать li с помощью:

render() {
        return (
            <div>
                {this.ObtNofNotes()}
            </div>
        )
    }

React возвращает ошибка: «Объекты недопустимы как дочерние элементы React (найдено: [обещание объекта]). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив.»

Но данные уже находятся в массиве и когда я console.log (nm) в функции n.map (), он возвращает каждый массив и объекты внутри него.

Что я делаю не так?

Я полагаю, что он имеет отношение к функциям asyn c и обещаниям, потому что он рендерит this.ObtNofNotes (), функцию asyn c, и я не уверен, есть ли у нее данные перед рендерингом или она ждет их до рендеринг, но я не уверен. Я новичок в React и буду очень признателен за вашу помощь!

Answer 1

Я решил это! Я сделал это:

Я создал массив в состоянии компонента:

state = {
   notes: []
}

Затем в функции, где я получаю заметки, я pu sh данные заметки о состоянии заметки :

.then((res) => {
   this.setState({notes: res.data.dataNotes})
})

Затем в функции componentDidMount я вызвал асинхронную функцию, которая получает данные из серверной части:

componentDidMount(){
        this.ObtNofNotes();
}

Затем в функции рендеринга я сопоставляю массив notes, вызывающий его из штата, и отображение его:

render() {

        return (
            <div>
                {
                this.state.notes.map(Data=>(
                <div>
                    <Note data= 
                        {Data}>
                    </Note>
                </div>
                ))}
            </div>
        )
    }

Надеюсь, это поможет кому-то еще!

Answer 2

перед вызовом .then() передать .lean() после функции запроса findOne.