当依赖项之一发生更改时，您能否使 useEffect 仅运行一次，但如果再次更改则不运行？

Question

我正在渲染有条件的内容，我有

const [content,setContent] = useState(0);
const [data,setData] = useState([]);
let render;
switch(content)
{ 
  case 0:render=<Something/>; break;
  case 1:render=<Else/> ;break;  
}

我有一些数据，只有在我们渲染<Else/>时才会使用，但用户可以随时使用单选按钮在<Something>和<Else/>之间切换。 如果用户从不切换到<Else/>我不想加载数据，但我也不想再次加载数据以防他从<Else/>切换到<Something/>然后再切换到<Else/>

所以使用useEffect(()=>{loadData().then(response=>setData(response.data))},[content])不是一个好主意，因为它会在每次用户切换时运行，但是如果我使用useEffect(()=>{loadData().then(response=>setData(response.data))},[])并且用户从未切换到我加载了不必要的数据？ 我怎样才能避免这个问题？

Answer 1

如果您需要的数据已经加载，您可以在useEffect钩子中进行验证。 如果是这种情况，那么就避免提出请求。

或者

将获取数据的责任传递给子组件（ Else和Something ）。 这样，它只会在该组件被渲染时执行。