CODEWITHSUNDEEP
javascriptnode.jsreactjsformik
crywink
crywink

Reputation: 11

ReactJS | Cannot convert undefined or null to object (w/ Formik)

Fixed: Apparently Formik gets mad if you don't pass InitialValues even though they aren't needed.

I'm trying to write a formik form in react although whenever I hit the submit button, I'm met with "TypeError: Cannot convert undefined or null to object". Any ideas?

{(activeServers && Object.keys(activeServers).length > 0) && Object.keys(activeServers).map((key) => (
    <div>
        <li>{activeServers[key].robloxData.serverId} [Player count: {activeServers[key].robloxData.playerList.length}]</li>
        <Formik onSubmit={() => {
            if (!activeServers || !activeServers[key]) return;
            shutdownServer(activeServers[key].robloxData.placeId, activeServers[key].robloxData.serverId);
        }}>
            {(props) => (
                <form onSubmit={props.handleSubmit}>
                    <h1>Heyt</h1>
                    <Button type="submit" colorScheme="red" children="Shutdown Server" />
                </form>
            )}
        </Formik>
    </div>
))}

This is the error:

Uncaught TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at setNestedObjectValues (utils.ts:158)
    at formikReducer (Formik.tsx:98)
    at updateReducer (react-dom.development.js:15318)
    at Object.useReducer (react-dom.development.js:16425)
    at useReducer (react.development.js:1512)
    at useFormik (Formik.tsx:173)
    at Formik (Formik.tsx:994)
    at renderWithHooks (react-dom.development.js:14985)
    at updateFunctionComponent (react-dom.development.js:17356)
    at beginWork (react-dom.development.js:19063)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at beginWork$1 (react-dom.development.js:23964)
    at performUnitOfWork (react-dom.development.js:22776)
    at workLoopSync (react-dom.development.js:22707)
    at renderRootSync (react-dom.development.js:22670)
    at performSyncWorkOnRoot (react-dom.development.js:22293)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at discreteUpdates$1 (react-dom.development.js:22420)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

Upvotes: 1

Views: 1781

Answers (2)

qslabs
qslabs

Reputation: 474

For those who did not read the post closely (such as myself), seems the author self-identified the solution. For visibility, the Formik component requires initialValues as a prop even if unused. Cheers!

Upvotes: 4

Nooruddin Lakhani
Nooruddin Lakhani

Reputation: 6967

It seems like activeServers is null or undefined. Try this

if ( activeServers !== null && activeServers !== undefined &&
  typeof Object.keys(activeServers) !== "undefined" &&
  Object.keys(activeServers).length > 0
) {
  // execute your code now
}

Upvotes: 0

Related Questions