小编jar*_*vak的帖子

如何比较钩子中反应 redux 状态的值

我最近使用 hooks 编写了一个 table 组件,每次页面加载时都会对后端进行 API 调用,因此同时会显示一个加载 Spinner,直到 API 响应。我使用 redux 作为状态管理,所以当有来自 API 的响应时,会调度一个动作并更新状态。所以这里的问题是,通常在类组件中我们可以使用比较 prevProps 和 nextProps

componentDidUpdate(prevProps){
  if(this.props.someState !== prevProps.someState){
      // do something
    }
}
Run Code Online (Sandbox Code Playgroud)

但我不确定如何使用 Hooks 实现相同的目标。我还提到了这个 stackoverflow 问题 How to compare oldValues and newValues on React Hooks useEffect?

但是这个解决方案在我的情况下似乎不起作用。我确实尝试过创建自定义钩子usePrevious并创建一个ref 来比较当前值,但这并没有解决我的问题。

这是我的部分代码。

let loading = true;

let tableData = useSelector((state) => {
   
    if (
      state.common.tableDetails.data &&
      state.common.tableDetails.status === true
    ) {
      loading = false;
      return state.common.tableDetails.data;
    }
   
    if (
      state.common.tableDetails.data &&
      state.common.tableDetails.status === false …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-redux react-state-management react-hooks

7
推荐指数
1
解决办法
209
查看次数

在 Web 中自动读取 OTP 并从 Web 中的剪贴板复制粘贴 OTP 不适用于 Android/iOS

我正在使用Ionic React应用程序,对于构建 ionic React 应用程序来说是全新的。目前,我正在尝试通过在用户登录/注册期间获取android/iOSOTP的直通消息来自动填充 OTP(一次性密码) 。目前,每次新注册/登录时,OTP 都会通过默认 SMS 服务发送给用户。因此,当 OTP 到达用户时,用户可以手动键入 OTP,也可以从消息中复制 OTP 并将其粘贴到 Web 应用程序中。因此,目前用户可以从消息中复制 OTP 并粘贴(有将触发的handlePaste函数),但是Twilio's

提出我面临的问题

  • 当 OTP 到达时,手机键盘中 OTP 的建议不会出现在 Android 中,但可以在 iOS 中显示。
  • 当用户从消息中复制 OTP 并返回应用程序并单击输入字段时,网络键盘将显示在键盘中复制的 OTP。现在,如果用户单击该 OTP,则仅填充输入字段的第一个字段,其他字段保留为空(使用 4 个单独的输入字段),并且不会触发handlePaste函数。
  • 我尝试在粘贴函数中添加控制台/警报,但没有记录任何内容。

短信格式

Your OTP is: 123456.

@domain.com #123456

Run Code Online (Sandbox Code Playgroud)

到目前为止尝试过的方法:

javascript android autofill reactjs ionic-react

4
推荐指数
1
解决办法
6735
查看次数

如何在 react-quill 中注册对齐样式

我正在使用react- quill npm 包并在 nextjs 中动态导入它,我也在使用 create-next-app 样板。我能够让 react-quill 编辑器工作,但我无法获得使用工具栏中的对齐按钮设置的图像样式/段落样式并重新显示内容 - 图像/段落。

用例:

  1. 添加图像/段落并从编辑器的工具栏中添加对齐方式。
  2. 将编辑器内容保存在数据库中
  3. 使用 npm 包htmr从数据库中重新显示 react- quill编辑器的内容

预期:图像/段落内容仍应右对齐/居中/对齐。

实际:图像/段落内容已删除所有样式属性。

下面是我的代码,如何在nextjs中为react-quill的图像/段落注册样式是我的问题

import { useState,useEffect } from 'react'
import Router from 'next/router'
import dynamic from 'next/dynamic' 
import { withRouter } from 'next/router'   // used to get access to props of react-dom
import { getCookie,isAuth } from '../../actions/auth';
import { createBlog }  from '../../actions/blog'

// dynamically importing react-quill  
const ReactQuill = dynamic( ()=> import('react-quill'), {ssr:false} ) …
Run Code Online (Sandbox Code Playgroud)

reactjs server-side-rendering next.js react-quill

3
推荐指数
1
解决办法
2230
查看次数