Question

我在 React 中有一个函数式组件：

export default function (id) {
    const [isReady] = useConfig(); //Custom hook that while make sures everything is ok
    useEffect( () => {
        if(isReady) 
            renderBackend(id);
    });

    async function renderBackend(id) {
        const resp = await getBackendData(id);
        ...
        ...
    }
}

现在，我将一些道具传递给功能组件，如下所示：

export default function (id, props) {
    const [isReady] = useConfig(); //Custom hook that while make sures everything is ok
    useEffect( () => {
        if(isReady) 
            renderBackend(id);
    });

    async function renderBackend(id) {
        const resp = await getBackendData(id, props); // Passing props to backend
        ...
        ...
    }
}

这里的道具是根据用户输入动态变化的。但是我这里的代码只渲染第一个道具，而不是后续道具。每次道具更新或通过时，我都想调用后端。我认为我们可能会为此使用 useEffect，但并不完全确定。而且我无法复制这是 codeSandbox，因为真正的代码非常复杂，并且已经精简到仅是基础。

Answer 1

改变

 useEffect( () => {
        if(isReady) 
            renderBackend(id);
 });

到

 useEffect( () => {
        if(isReady) 
            renderBackend(id);
 }, [id]);

so useEffect 函数在每次 id 更改时运行

Answer 2

由于您没有放置 useEffect 依赖项，它将在每次重新渲染时执行（状态更改，...）

因此要在每次 props 更改时执行 useEffect 中的代码，将其放入 useEffect 依赖项列表中。

useEffect( () => {
        if(isReady) 
            renderBackend(id);
    }, [id, props]);

最佳实践是解构你的 props 并只将受影响的值放入依赖项中。

Answer 3

当使用 React.useEffect() 钩子时，请考虑您必须传递依赖项才能从 useEffect 中获得所需的一切。代码片段将帮助您更好地理解这一点。

useEffect(() => {
   console.log('something happened here');
}, [one, two, three]);

每次将其中一项传递给 [one, two, three] 时，您都可以在浏览器开发者工具控制台中看到 something happened here。我还应该提到，将复杂的嵌套对象或数组作为对提到的钩子的依赖项传递根本不是一个好主意。

在异步函数上应用 useEffect

3 个答案: