在"useEffect"中设置 useEffect 钩子的依赖关系而不触发 useEffect

Question

Edit：我刚刚想到可能不需要重置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。(目前，我最终调用了两次服务——一次是因为获胜，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(const [items, setItems] = ([])是指const [items, setItems] = useState([])，2(您只想在调用API后反映最新数据：

组件的状态更新后，它会自行重新渲染。无需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(创建一个包含它的新数组(。