Question

我试图在初次运行时运行组件，我试图将状态值分派给另一个组件

在特定组件中运行useEffect时，useEffect连续运行更新：

每当我从下拉列表更改为useEffect并将其设置为state时，我也会出现一个下拉列表

const handleChange = (event) => {
        console.log("Role changing")
        console.log(event.target.value)
        setStates(event.target.value);
        dispatch({
            type: "SettingROLE",
            payload: states
        })
      };

const { dispatch , state: authState  } = useContext(AuthContext);

    const authMenus = JSON.parse(sessionStorage.getItem("menus")) || []

    const [states, setStates] = useState();

useEffect(() => {
        console.log("Inside of header useEffect")
        const roleid = authMenus.roles[0];
        if(roleid) setStates(roleid.role)
        dispatch({
            type: "SettingROLE",
            payload: states
        })
      }, [authMenus.roles , dispatch , states]);

我试图删除useEffect的依赖关系，但是调度不起作用，它不会调度state的值

Answer 1

您应将逻辑分为两个print(df) Team Adversary Home 0 Internacional Bahia Home 1 Bahia Internacional Away 2 Flamengo Grêmio Home 3 Grêmio Flamengo Away钩子：

exDict = {1:1, 2:2, 3:3}
with open('file.txt', 'w+') as file:
    file.write(str(exDict))

因为要更新的状态是一个依赖项，会导致无限渲染。

Answer 2

useEffect会在依赖项数组中的任何值更改时运行。如果它连续运行，那是因为值在变化。对象通过引用进行比较，因此每次在组件中创建的任何值都将具有新的引用。

在这种情况下，const authMenus = JSON.parse(sessionStorage.getItem("menus")) || []将在每次组件渲染时创建一个新的引用类型，并触发无限循环。

有很多方法可以解决问题，具体取决于您要完成的工作。

您可以通过将代码移到组件上方来对其进行解析。

您可以像其他答案一样将其添加到自己的useEffect中。

您可以将其存储在useRef中，这样就不会触发重新渲染。

https://reactjs.org/docs/hooks-reference.html#useref

const authMenus = useRef(JSON.parse(sessionStorage.getItem("menus")) || []);

如果您有要触发值更新的依赖项，也可以使用useMemo。

https://reactjs.org/docs/hooks-reference.html#usememo

const authMenus = useMemo(() => JSON.parse(sessionStorage.getItem("menus")) || [],[someDependency]);

Answer 3

如果您只想在初次运行时调度，只需在依赖项中传递[]就可以了！

另外，在useEffect内调用setStates会导致无限循环！您可以将代码（调度以外的代码）移到useEffect之外

UseEffect在React中连续运行吗？

3 个答案: