React Hooks会在 await之后多次渲染。

const [ html, setHTML ] = useState('');
const [ script, setScript ] = useState('');

const update = (script, html) => {
  setScript(script);
  setHTML(html);
};

update('a', 'b'); // actual code in an event handler

上面的代码很好用,React Hooks会渲染once,并且结合setScript & setHTML。

const [ html, setHTML ] = useState('');
const [ script, setScript ] = useState('');

const update = async (script, html) => {
  await new Promise(resolve => setTimeout(resolve, 10));
  setScript(script);
  setHTML(html);
};

update('a', 'b'); // actual code in an event handler

上面的代码不能用了,React Hooks会渲染两次,而且不能结合setScript & setHTML。

我可以把代码改成。

const [ state, setState ] = useState({
  html: '',
  script: ''
});

const update = async (script, html) => {
  await new Promise(resolve => setTimeout(resolve, 10));
  setState({
    script,
    html
  });
};

update('a', 'b'); // actual code in an event handler

上面的代码只渲染了一次,但它有一个新的错误:textArea中的光标(脚本和html的位置)会移动到textArea的末端,而不是停留在原地。

解决方案:

这是不可避免的:当你异步运行你的代码时,React无法知道在当前代码之后可能会有更多的同步setter被执行,所以它必须为每个setter触发render。你可以像你一样,通过制作一个单一的状态对象来进行批处理,或者使用 unstable_batchedUpdates:

import {unstable_batchedUpdates as batchedUpdates} from 'react-dom';

// ....

const [ html, setHTML ] = useState('');
const [ script, setScript ] = useState('');

const update = async (script, html) => {
  await new Promise(resolve => setTimeout(resolve, 10));
    batchedUpdates(() => {
        setScript(script);
        setHTML(html);
    });
};

update('a', 'b');

给TA打赏
共{{data.count}}人
人已打赏
未分类

Gson.fromJson卡在行上

2022-9-8 15:24:39

未分类

Flexform中的TYPO3 FAL

2022-9-8 15:24:41

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索