无法在反应中使用钩子更新 object

Question

I have a function that will update my object value depending on the app name using useState hook. But I am not able to use the hook, it gives error invalid hook call.

Any other way to achieve the same will also work.

var myfun = (function() {

  const APP_NAME= "sample app"
  const [object, setObject] = useState({obj: 'value'})

  if(APP_NAME =="sample app") {
        setObject({obj:'new value'})
         console.log('here')
     }
      return object
});

myfun(); 

Answer 1

Create a custom Hook instead of that Function:

const useMyFun = () => {
    const [object, setObject] = useState({obj: 'value'});

    const APP_NAME = 'sample name';

    useEffect(() => {
        if (APP_NAME === 'sample name') setObject({obj: APP_NAME});
    }, [APP_NAME]);

    return object;
}


// In the component you need it:

const SomeComponent = () => {

    // will update if state changes in the useMyFun Hook;
    const appname = useMyFun();


    // rest of your component code
    ...
}

make sure you use functional components to use this.

NOTE: but this will only be useful if APP_NAME will ever change. otherwhise you could just use a simple ternary operator:

   const object = APP_NAME === 'sample name' ? {obj: APP_NAME} : {obj: 'value'}

Answer 2

Try to move the hook call outside the function like this and the invalid hook call error will disapear i think:

import React from "react";
import { useState } from "react";

function App() {
  const [object, setObject] = useState({ obj: "value" });

  const myfun = () => {
    const APP_NAME = "sample app";
    if (APP_NAME === "sample app") {
      setObject({ obj: "new value" });
      console.log("here");
    }
    return object;
  };

  myfun();

  return (
    ....
  );
}

export default App;

i hope this helps you.

Answer 3

If all the above answers don't work look for an infinite react hook loop (usually with useEffect);