Reactjs 如何从外部效果设置React挂钩的状态？

如何设置加载（由上限函数返回），以便在component.js中使用它？（请参阅代码中的注释）

controller.js

const controller = {
    postRender: () => {
        const otherVar = useState(0);
        const loading = useState(false);
        
        useEffect(() => {
            // this is automatically called on every render and in fact accepts variables from postRender() scope
            otherVar(1);
        }, [other_var])

        const setLoading = (isLoaded) => {
            // this is called in component.js
            // how do I set loading (returned by the upper scope function) so I can use it in component.js?
        }

        return {
                otherVar,
                loading,
                setLoading
        };
    }
}

export default controller;

export default function component() {

    const { loading } = controller.postRender();

    return (
        <Wrapper onClick="setLoading(!loading)">
        </Wrapper>

   }
}

component.js

const controller = {
    postRender: () => {
        const otherVar = useState(0);
        const loading = useState(false);
        
        useEffect(() => {
            // this is automatically called on every render and in fact accepts variables from postRender() scope
            otherVar(1);
        }, [other_var])

        const setLoading = (isLoaded) => {
            // this is called in component.js
            // how do I set loading (returned by the upper scope function) so I can use it in component.js?
        }

        return {
                otherVar,
                loading,
                setLoading
        };
    }
}

export default controller;

export default function component() {

    const { loading } = controller.postRender();

    return (
        <Wrapper onClick="setLoading(!loading)">
        </Wrapper>

   }
}

导出默认功能组件（）{
const{loading}=controller.postRender（）；
返回(
}
}

如下更新您的组件.js文件

文件：component.js

export default function component() {

    const { setLoading, loading } = controller.postRender();

    return (
        <Wrapper onClick={() => setLoading(!loading)}>
        </Wrapper>

   }
}

到

并删除此功能

const setLoading = (isLoaded) => {
            // this is called in component.js
            // how do I set loading (returned by the upper scope function) so I can use it in component.js?
}

如下所示更新您的component.js文件

文件：component.js

export default function component() {

    const { setLoading, loading } = controller.postRender();

    return (
        <Wrapper onClick={() => setLoading(!loading)}>
        </Wrapper>

   }
}

到

并删除此功能

const setLoading = (isLoaded) => {
            // this is called in component.js
            // how do I set loading (returned by the upper scope function) so I can use it in component.js?
}

---

首先，我将修改controller.js，并使其成为一个合适的自定义钩子

大概是这样的：

import { useState, useEffect } from "react";
const useDragon = () => {
  const [otherState, setOtherState] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setOtherState(1);
  }, [setOtherState]);

  const changeLoading = () => {
    // assuming you want to toggle the loading
    setLoading(prevLoading => !prevLoading)
  };

  return {
    otherState,
    loading,
    changeLoading
  };
};

export default useDragon;

在组件中，您可以这样使用它：

export default function component() {

    const { otherState, loading, changeLoading } = useDragon();

    return (
        <Wrapper onClick={changeLoading}>
        </Wrapper>

   }
}

导出默认功能组件（）{
const{otherState，loading，changeLoading}=useDragon（）；
返回(
}
}

首先，我要修改controller.js并使其成为一个合适的自定义挂钩

大概是这样的：

import { useState, useEffect } from "react";
const useDragon = () => {
  const [otherState, setOtherState] = useState(0);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setOtherState(1);
  }, [setOtherState]);

  const changeLoading = () => {
    // assuming you want to toggle the loading
    setLoading(prevLoading => !prevLoading)
  };

  return {
    otherState,
    loading,
    changeLoading
  };
};

export default useDragon;

在组件中，您可以这样使用它：

export default function component() {

    const { otherState, loading, changeLoading } = useDragon();

    return (
        <Wrapper onClick={changeLoading}>
        </Wrapper>

   }
}

导出默认功能组件（）{
const{otherState，loading，changeLoading}=useDragon（）；
返回(
}
}

useffect

只能在功能组件或自定义挂钩中使用。

postdrender

不在其中。您的代码如何工作？@TonyNguyen postdrender（）您可以看到它确实被称为onRender（）在我的原始代码中-我更改了它，假设它不相关，因为我看到的是

component.js

调用一个使用state返回一些方法和一些效果的方法，据我所知，当您定义控制器时，React会立即引起问题。检查这里的codesandbox

Useffect

只能在功能性component中使用ent或自定义钩子。

postRender

不在其中。您的代码是如何工作的？@TonyNguyen postRender（）您在那里看到它确实被称为onRender（）在我的原始代码中-我更改了它，假设它与此无关，因为我看到的是

component.js

调用一个方法，该方法使用stateAs返回一些方法和一些效果。据我所知，当您定义控制器时，React会立即引发问题。请检查此处的codesandbox，但它不会更新controller.js上的

loading

这是我的目标。应该是吗？我已经更新了我的评论，在controller.js文件中添加了您需要做的更改。但这不会更新controller.js上加载的

，这是我的目标。应该是吗？我已经更新了我的评论，在controller.js文件中添加了您需要做的更改。