Javascript 设置useEffect挂钩'；'useEffect'中的依赖项，而不触发useEffect

编辑：我突然想到，可能不需要在

useffect

hook中重置变量。事实上，

声明了使用效应被忽略的原因

的实际值可能无关紧要。无论出于何种目的，它都只是触发

useffect

的一种方式

假设我有一个功能性的React组件，我使用

useffect

hook初始化它的状态。我打电话给服务中心。我检索一些数据。我将这些数据提交给州政府。酷。现在，假设我以后与同一个服务交互，只是这次我创建或删除了单个结果项，而不是简单地检索结果列表，从而修改了整个结果集。现在，我希望检索我先前检索到的数据列表的更新副本。此时，我想再次触发我用来初始化组件状态的

useffect

钩子，因为我想重新呈现列表，这次考虑新创建的结果项

​

​

我希望上面的说法有道理

​

问题是，我希望在不强制重新渲染的情况下，将导致UseEffects被取消的

状态重置为
false
。（目前，我调用该服务两次——一次是因为win
状态导致UseEffectToBeInvoked
设置为
true
，然后在
useEffect
钩子的上下文中将其重置为
false
时再次调用该服务。该变量的存在仅用于触发
useEffect
并避免我需要o在其他地方发出与我在
useffect
内发出的相同的服务请求

​

有人知道这是如何实现的吗？
要实现与您描述的行为相似的行为，您可以做以下几件事：

将导致useffecttobeinvoked的
状态更改为数字
如果将导致UseEffects被取消的
状态更改为一个数字，则使用后无需重置，只需不断递增即可触发效果

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

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

将条件添加到
useffect
不需要实际更改外部的任何逻辑，只需将
useffect
-body调整为仅在导致useffect被调用的
状态为
true
时运行即可。
这仍然会触发
useffect
，但会立即跳出，不会导致任何不必要的请求或重新提交

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

假设1）通过
const[items，setItems]=（[]）
您的意思是
const[items，setItems]=useState（[]）
，以及2）您只是想反映调用API后的最新数据：

当组件的状态更新时，它会自行重新渲染。不需要导致调用UseEffects的
状态
：

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 )
    }
}                                           }

但是，您可以在本地更改数组，而不是在每次操作后获取所有项目，因此，如果创建（POST）
响应.data
是新创建的项目，您可以将其添加到
项目中（创建包含它的新数组）。
您想要什么？您想在收到新数据时重新呈现组件，以便更新它，使其反映新数据吗？简而言之，我想在发生任何类型的写入操作时重新呈现组件—无论是PUT、POST还是DELETE。每当这些操作中的任何一个发生时，我都打算设置
状态，使useffecttobeinvoked
成为某物--任何东西--只要它触发运行
useffecttobeinvoked
。这在之前都可以正常工作，除了我还需要
useffect
在此操作后通过简单地将导致useffect被取消的
状态重置为
false
来清理。
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 )
    }
}                                           }