在不触发useEffect的`useEffect`内设置useEffect钩子的依赖关系

Question

编辑:我刚刚想到可能不需要在useEffect钩子中重置变量。事实上，stateTheCausesUseEffectToBeInvoked的实际价值可能是无关紧要的，它只是触发useEffect的一种方式。

假设我有一个函数式React组件，我使用useEffect钩子初始化它的状态。我呼叫了一个服务。我检索了一些数据。我将数据提交给state。凉爽的。现在，假设稍后我与相同的服务交互，但这次不是简单地检索结果列表，而是创建或删除单个结果项，从而修改整个结果集。现在，我希望检索之前检索到的数据列表的更新副本。此时，我想再次触发用于初始化组件状态的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。(目前，我最终调用了该服务两次--一次是因为win stateThatCausesUseEffectToBeInvoked设置为true，另一次是在useEffect钩子的上下文中将其重置为false。此变量仅用于触发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]);

Answer 2

假设1)您所说的API是指const [items, setItems] = useState([])，2)您只是想在调用const [items, setItems] = ([])之后反映最新的数据：

当组件的状态更新时，它会自行重新呈现。不需要stateThatCausesUseEffectToBeInvoked

const myComponent = () => {

const [ items, setItems ] = useState( [] )

const getSomeData = async () => {
    try {
        const response = await callToSomeService1()
        // When response (data) is received, state is updated (setItems)
        // When state is updated, the component re-renders on its own
        setItems( response.data )
    } catch ( error ) {
        console.log( error )
    }
}

useEffect( () => {
    // Call the GET function once ititially, to populate the state (items)
    getSomeData()
    // use [] to run this only on component mount (initially)
}, [] )

const createNewItem = async () => {
    try {
        const response = await callToSomeService2()
        // Call the POST function to create the item
        // When response is received (e.g. is OK), call the GET function
        // to ask for all items again.
        getSomeData()
    } catch ( error ) {
        console.log( error )
    }
}                                           }

但是，您可以在本地更改数组，而不是在每次操作后获取所有项，因此如果create (POST) response.data是新创建的项，则可以将其添加到items (创建一个包含它的新数组)。