循环请求与 axios 反应

Question

我在后端定义了一个套接字，它接受对服务器的连续请求。现在，我想连续向后端 API 发送请求，直到按下停止按钮。所以，我可以使用一个循环（坏习惯）。问题是它从不检查更新状态。那么，我怎样才能用最好的编码实践来实现它呢？

我在 Next.JS 中为客户端和服务器使用了两个不同的页面。服务器有一个简单的按钮来启动和停止服务器，当按钮设置为启动时，它应该不断接受请求并更新响应状态，当按钮设置为停止时，它应该停止请求。

const [close, closeButton] = useBoolean() // State for close button
let req;
proto ? req = 'UDP' : req = 'TCP' // There is a checkbox to select the connection mode. proto is a state.
console.log(`Close button: ${close}`) // This state updates correctly. 

const onSubmit = async () => {
   while(!close)
        console.log(`Close button: ${close}`) // This state does not update while staying in the loop.
        const res = await serverRequest(req) 
        console.log(res.messageFromClient)
    }
}

那么，在按下关闭按钮之前，我应该如何无限期地将其设置为运行。我应该为全局状态使用 redux 还是有比 while 循环更好的方法？

客户端代码供参考：

 const onSubmit = async values => {
        const clientData = await clientRequest({proto, JSON.stringify(values.message)})
        console.log(clientData)
        console.log(values.message)
    }

每次从客户端发送消息时，此代码都会发送客户端数据。所以，为了运行客户端，服务器应该不断地监听请求。每当客户端发送请求时，服务器应该得到响应并再次启动服务器，直到更改连接模式或在服务器端代码中按下关闭按钮。

Answer 1

如果您绝对必须使用此代码，并希望它访问更新后的状态，那么您可以将状态副本缓存在React ref 并参考它。

const [close, closeButton] = useBoolean() // State for close button
const closeRef = React.useRef();

React.useEffect(() => {
  closeRef.current = close; // <-- cache close value when it updates
}, [close]);

const onSubmit = async () => {
  while(!closeRef.current) // <-- cached close state value
    console.log(`Close button: ${closeRef.current}`)
    const res = await serverRequest(req) 
    console.log(res.messageFromClient)
  }
}

循环请求与 axios 反应

Loop requests in react with axios

javascript

response

reactjs

axios

next.js