可以使用一个状态变量在两个 useEffect() 之间进行通信,以便在需要让一个 useEffect() 触发另一个 useEffect() 的情况下,可以修改此状态变量。
例如,在以下代码示例中,我们设置了一个名为“isReady”的状态,对其值进行了修改,并在两个 useEffect() 之间进行了通信:
import React, { useState, useEffect } from 'react';
function App() {
const [data, setData] = useState([]);
const [isReady, setIsReady] = useState(false);
useEffect(() => {
if (isReady) {
// 这里写另一个 useEffect() 的内容
console.log('Is ready!');
}
}, [isReady]);
useEffect(() => {
// 这里写原来的 useEffect() 的内容
console.log('Fetch data');
fetch('https://jsonplaceholder.typicode.com/todos')
.then(response => response.json())
.then(json => setData(json));
setIsReady(true);
}, []);
return (
Hello World
);
}
export default App;
在此示例中,第一个 useEffect() 依赖于“isReady”状态的值。当“isReady”被设置为 true 时,第一个 useEffect() 就会执行,输出“Is ready!”;而第二个 useEffect() 获取数据并'isReady”设置为 true。
在两个 useEffect() 之间进行通信的关键在于同步“isReady”状态的值,并在需要的时候进行修改。这种方法可以避免另一个 useEffect() 触发原有的 useEffect(),而不需要过多地处理其它状态或引入第三方库。
上一篇:避免令牌生成的最佳方法
下一篇:避免Linq查询中重复代码的问题