无法在react中使用钩子更新对象

py49o6xq  于 2023-01-31  发布在  React
关注(0)|答案(3)|浏览(113)

我有一个函数,将更新我的对象值取决于应用程序名称使用useState挂钩。但我不能使用挂钩,它给错误无效的挂钩调用。
任何其他实现相同目标的方法也将起作用。

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();
pgccezyw

pgccezyw1#

创建自定义Hook而不是该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
    ...
}

请确保您使用功能组件来使用它。
注意:但这将只在APP_NAME将改变时有用。否则您可以只使用一个简单的三元运算符:

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

8iwquhpp2#

试着像这样把钩子调用移到函数之外,我想无效钩子调用的错误就会消失:

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;

希望这对你有帮助。

mccptt67

mccptt673#

如果以上所有的答案都不起作用,寻找一个无限react钩子循环(通常使用useEffect);

相关问题