我在有条件地启用/禁用材料ui按钮时遇到了延迟。在将materialUi和reactjs迁移到最新版本后会出现延迟（react 18，mui/material：5.10.10）我正在使用的示例从redux读取状态，然后基于更改的状态，我预期的禁用值被更改。这只发生在disable属性中，如果我基于状态更改更改Button的文本，则没有看到任何延迟。
import { Button } from '@mui/material';
import { useDispatch, useSelector } from 'react-redux';
......
const dispatch = useDispatch();
const {loading } = useSelector( reportSelector);
<Button
size='large'
disabled={loading}
> Execute
</Button>如果我在呈现组件之前检查状态，它工作正常，但不是好的解决方案。
{loading && <Button
size='large'
disabled
> Execute
</Button>}
{!loading && <Button
size='large'
> Execute
</Button>
1条答案
按热度按时间8hhllhi21#
一种可能性是，您遇到的问题是由于您在呈现Button元素的组件内使用了useSelector挂钩。useSelector挂钩是对Redux存储的选择器函数的引用，它被设计为在需要访问由存储管理的状态的组件内使用。
在您的情况下，可能会多次调用useSelector挂钩，这可能会导致不必要的组件重新呈现，并导致您遇到的延迟。解决此问题的一种方法是将useSelector挂钩移到组件外部，并将结果存储在组件可以访问的变量中。