useRequest 在react18 开启严格模式下 data 无法正常返回数据 一直是undefined

[miaojinsing]

useRequest 在react18 开启严格模式下 data 无法正常返回数据 一直是undefined

[mmarifat]

Facing same issue, but with manual: false is giving data

[crazylxr]

@miaojinsing @mmarifat 这是一个我做测试的 demo，并没有出现 data 无法返回的情况

[github-actions]

Hello @miaojinsing. Please provide a online reproduction by forking this link https://codesandbox.io/s/ok2fe or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @miaojinsing, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

[miaojinsing]

@miaojinsing @mmarifat 这是一个我做测试的 demo，并没有出现 data 无法返回的情况

我用这种方法防止重复请求 ，但 在react 开启 严格模式后 返回data数据是不会刷新的 一直是undefined , 网络返回数据是正常的

Hello @miaojinsing. Please provide a online reproduction by forking this link https://codesandbox.io/s/ok2fe or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @miaojinsing, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

const init = useRef()
const { data , run } = useRequest(queryAttachmentGroupWithTotalAll,{ manual:true })

useEffect(()=>{
if(!init.current) {
init.current = true
run({ type:1 })
}
},[])

console.log(data)

[miaojinsing]

Hello @miaojinsing. Please provide a online reproduction by forking this link https://codesandbox.io/s/ok2fe or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.

你好 @miaojinsing, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

https://codesandbox.io/p/sandbox/default-usage-forked-pvkw6w?file=%2FApp.tsx%3A24%2C10&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cluc1vqzg00063b6kbmgqgqnx%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cluc1vqzg00023b6khpwa9wjv%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cluc1vqzg00033b6kqga5mg8b%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cluc1vqzg00053b6kizjmk28i%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cluc1vqzg00023b6khpwa9wjv%2522%253A%257B%2522id%2522%253A%2522cluc1vqzg00023b6khpwa9wjv%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cludg0mts00273b6m12othx41%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A24%252C%2522startColumn%2522%253A10%252C%2522endLineNumber%2522%253A24%252C%2522endColumn%2522%253A10%257D%255D%252C%2522filepath%2522%253A%2522%252FApp.tsx%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cludg0mts00273b6m12othx41%2522%257D%252C%2522cluc1vqzg00053b6kizjmk28i%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluc1vqzg00043b6kfe29ajpt%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cluc1vqzg00053b6kizjmk28i%2522%252C%2522activeTabId%2522%253A%2522cluc1vqzg00043b6kfe29ajpt%2522%257D%252C%2522cluc1vqzg00033b6kqga5mg8b%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cluc1vqzg00033b6kqga5mg8b%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[amyhuangxbd]

In strict mode, useEffect is executed twice. After the first execution, init.current is true. When useEffect is executed for the second time, because init.current is true, the run method will not be executed, so the data is undefined.
If you want to execute the run method successfully, you can use async/await
https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22[https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22](url)

[crazylxr]

@miaojinsing @mmarifat 这是一个我做测试的 demo，并没有出现 data 无法返回的情况

我用这种方法防止重复请求 ，但 在react 开启 严格模式后 返回data数据是不会刷新的 一直是undefined , 网络返回数据是正常的

Hello @miaojinsing. Please provide a online reproduction by forking this link https://codesandbox.io/s/ok2fe or a minimal GitHub repository. Issues labeled by Need Reproduce will be closed if no activities in 3 days.
你好 @miaojinsing, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。

const init = useRef() const { data , run } = useRequest(queryAttachmentGroupWithTotalAll,{ manual:true })

useEffect(()=>{ if(!init.current) { init.current = true run({ type:1 }) } },[])

console.log(data)

因为 useEffect 在 react 18 dev 模式 + 严格模式 useEffect 会挂载两次，这个是防止开发者在 dev 环境写出 bug，所以正确的写法是 useEffect 卸载的时候对 init 进行还原。增加一个 init.current = false，见下面的代码，即可正常拿到 data

更多请看下最新的官方文档：https://zh-hans.react.dev/learn/synchronizing-with-effects#fetching-data

const init = useRef()
const { data , run } = useRequest(queryAttachmentGroupWithTotalAll,{ manual:true })

useEffect(()=>{
  if(!init.current) {
    init.current = true
  run({ type:1 })
 
 return () => {
   init.current = false;
 }
}
},[])

console.log(data)

[crazylxr]

In strict mode, useEffect is executed twice. After the first execution, init.current is true. When useEffect is executed for the second time, because init.current is true, the run method will not be executed, so the data is undefined. If you want to execute the run method successfully, you can use async/await [https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22](https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22%5Bhttps://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22%5D(url))

I don't think this is a suitable solution. It only avoids the problem but does not solve it. It is recommended to refer to the above answer to solve this problem.

[miaojinsing]

In strict mode, useEffect is executed twice. After the first execution, init.current is true. When useEffect is executed for the second time, because init.current is true, the run method will not be executed, so the data is undefined. If you want to execute the run method successfully, you can use async/await [https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22](https://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22%5Bhttps://codesandbox.io/p/sandbox/default-usage-forked-7tzrt5?file=%2FApp.tsx%3A21%2C10-21%2C22%5D(url))

I don't think this is a suitable solution. It only avoids the problem but does not solve it. It is recommended to refer to the above answer to solve this problem.

合情合理