Getting Invariant Violation: Objects are not valid as a React child

Question

My code doesn't work, it always returning

Invariant Violation: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72}). If you meant to render a collection of children, use an array instead.

is there any wrong syntax or logic in there? here is my code:

const asyncTest1= async() => {
    try {
        noteAction({ type: SET_LOADING, payload: true });
        const response = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('Async Test Load');
            }, 3000);
        });
        const adding = noteAction({ type: ADD_NOTE, payload: response });
        const setLoadingFalse = noteAction({ type: SET_LOADING, payload: false });
        const result = await Promise.all([response, adding, setLoadingFalse]);
        return result;
    } catch (e) {
        console.log(e);
    }
};

but with no async/await version, my code is working:

  const asyncTest2= () => {
        try {
            noteAction({ type: SET_LOADING, payload: true });
            const result = new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve('Async Test Load');
                }, 3000);
            });
            return result
            .then(response => noteAction({ type: ADD_NOTE, payload: response }))
            .then(response => noteAction({ type: SET_LOADING, payload: false }));
        } catch (e) {
            console.log(e);
        }
    };

I doubt the error comes from this piece of code. Please add the stack trace, and post the relevant parts of your code - probably `noteAction` and the `render` method of the affected component? — Bergi, Apr 19 '19 at 15:37
And no, this has nothing to do with promises or asynchrony per se. — Bergi, Apr 19 '19 at 15:38
Did you have a look at [Invariant Violation: Objects are not valid as a React child](https://stackoverflow.com/q/33117449/1048572) and related ones? — Bergi, Apr 19 '19 at 15:41
when i use the promise .then version. it works, the error happen when i use async/await instead of the old promise version. @Bergi — ukiyakimura, Apr 20 '19 at 04:46
Which "`.then` version" are you talking about? Please [edit] your code to include the working code so that we can compare. — Bergi, Apr 20 '19 at 08:00
My guess is that passing `payload: response` to `noteAction` is the culprit, as `response` is a promise. — Bergi, Apr 20 '19 at 08:01
Thanks. Indeed, those are not equivalent - your second snippets waits the 3 seconds before calling `noteAction(…)`, while your first snippets calls them at once. Why did you introduce `Promise.all`, what did you want to achieve? Why not just use the working version? — Bergi, Apr 20 '19 at 10:35
i try to user await version in the future, i think it has better readability than promise.then.then @Bergi how do i fix it? — ukiyakimura, Apr 21 '19 at 05:07

score 0 · Accepted Answer · answered Apr 21 '19 at 15:21

but with no async/await version, my code is working

The equivalent of that with async/await syntax would not use any Promise.all, it would be

const asyncTest2 = () => {
    try {
        noteAction({ type: SET_LOADING, payload: true });
    } catch (e) {
        console.log(e);
    }
    var result = new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Async Test Load');
        }, 3000);
    });
    var response = await result;
    var response = await noteAction({ type: ADD_NOTE, payload: response }));
    return noteAction({ type: SET_LOADING, payload: false }));
};

I can't tell whether this is what you actually want, but at least it would work the same as the then version.

Getting Invariant Violation: Objects are not valid as a React child

1 Answers1