时间戳

首页 > 解决方案 > 在`useEffect`中设置useEffect钩子的依赖而不触发useEffect

javascript - 在`useEffect`中设置useEffect钩子的依赖而不触发useEffect

问题描述

编辑：我突然想到，可能不需要在useEffect钩子中重置变量。事实上，stateTheCausesUseEffectToBeInvoked的实际值可能无关紧要。出于所有意图和目的，它只是一种触发方式useEffect。

假设我有一个功能性的 React 组件，我使用useEffect钩子初始化了它的状态。我打电话给服务。我检索了一些数据。我将这些数据提交给状态。凉爽的。现在，假设我稍后与同一个服务进行交互，只不过这次不是简单地检索结果列表，而是创建或删除单个结果项，从而修改整个结果集。我现在希望检索我之前检索到的数据列表的更新副本。此时，我想再次触发useEffect我用来初始化组件状态的钩子，因为我想重新渲染列表，这次要考虑新创建的结果项。

​​​

const myComponent = () => {
  const [items, setItems] = ([])
  useEffect(() => {
    const getSomeData = async () => {
      try {
        const response = await callToSomeService()
        setItems(response.data)
        setStateThatCausesUseEffectToBeInvoked(false)
      } catch (error) {
        // Handle error
        console.log(error)
      }
    }
  }, [stateThatCausesUseEffectToBeInvoked])

  const createNewItem = async () => {
    try {
      const response = await callToSomeService()
      setStateThatCausesUseEffectToBeInvoked(true)
    } catch (error) {
        // Handle error
        console.log(error)
    }
  }
}

​​​

我希望以上是有道理的。

​​​

问题是我想重置stateThatCausesUseEffectToBeInvoked为false不强制重新渲染。（目前，我最终调用了该服务两次——一次 for winstateThatCausesUseEffectToBeInvoked设置为true然后再次设置为false在useEffect钩子的上下文中。此变量的存在仅用于触发useEffect和避免我需要在其他地方进行我在 内提出的相同服务请求useEffect。

​​​

有谁知道这可能是如何实现的？

标签： javascriptreactjsreact-hooks

解决方案

您可以采取一些措施来实现类似于您所描述的行为：

换个stateThatCausesUseEffectToBeInvoked号码

如果更改stateThatCausesUseEffectToBeInvoked为数字，使用后无需重新设置，只需不断递增即可触发效果。

useEffect(() => {
  // ...
}, [stateThatCausesUseEffectToBeInvoked]);

setStateThatCausesUseEffectToBeInvoked(n => n+1); // Trigger useEffect

添加条件到useEffect

无需实际更改外部的任何逻辑，您只需将useEffect-body 调整为仅运行 if stateThatCausesUseEffectToBeInvokedis true。这仍然会触发useEffect但立即跳出，不会导致任何不必要的请求或重新渲染。

useEffect(() => {
  if (stateThatCausesUseEffectToBeInvoked === true) {
    // ...
  }
}, [stateThatCausesUseEffectToBeInvoked]);

推荐阅读