javascript - 在`useEffect`中设置useEffect钩子(Hook)的依赖关系而不触发useEffect

Question

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

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

​

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 而不强制重新渲染。 (目前，我最终调用该服务两次 - 一次是在 win stateThatCausesUseEffectToBeInvoked 设置为 true 时，然后在重置为 false 时再次调用useEffect Hook 的上下文。此变量的存在只是为了触发 useEffect 并让我无需在其他地方发出与在 中发出的相同服务请求useEffect.

​

有谁知道如何实现这一点吗？

Answer 1

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

将 stateThatCausesUseEffectToBeInvoked 更改为数字

如果将 stateThatCausesUseEffectToBeInvoked 更改为数字，则使用后无需重置它，只需不断增加它即可触发效果。

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

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

向 useEffect 添加条件

您无需实际更改外部的任何逻辑，只需调整 useEffect-body 使其仅在 stateThatCausesUseEffectToBeInvoked 为 true 时运行。这仍然会触发 useEffect 但直接跳出并且不会导致任何不必要的请求或重新渲染。

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