如何解决将Socket.IO与React
当驱动程序响应时,我试图在React应用程序中填充列表,但是当我为其中一个常量设置不同的状态时,它将停止在redux中或使用钩子更新数组。
所以我有以下内容:
在这里,我等待驱动程序接受一个新对象,并将其推送到redux,并且当redux中的命令列表包含一个对象时,我将停止加载程序及其动画以显示不同的内容
useEffect(() => {
socket.on('newDriverAccepted',function (driver) {
actions.addOrder(driver)
});
if (orders.length > 0) {
setStopped(true)
setAnimate(false)
}
});
内容看起来像这样。因此,如果animate = true
显示动画,否则显示驱动程序列表。如果我这样使用它,它将仅填充收到的第一个对象,而不会接收来自套接字的任何其他对象。如果我要删除setAnimate(false)
,则所有对象都将按预期方式进行还原。
return (
<div style={{ width: '100%',height: "100%" }}>
{animate ?
<div style={{
width: '100%',height: '100%',flexDirection: "row",justifyContent: "center",alignItems: "center",display: "flex"
}}>
<Lottie
options={lottieOptions}
height={400}
width={400}
isStopped={isStopped}
isPaused={isPaused}
/>
</div> :
<div style={{ width: '100%',display: 'flex' }}>
<div style={{ width: '40%' }}>
<Results
drivers={orders}
location={location}
user={user}
isTimedout={isTimedout}
handleTryAgian={() => handleSendToAll()}
/>
</div>
<div style={{ width: '60%',height: '100%' }}>
<Map location={location} />
</div>
</div>
}
</div>
)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。