如何解决DetailsList 正在重新渲染,因此正在失去其状态
所以我一直试图实现这样的想法,即每当用户单击 DetailsList 中的任何行时,按钮都会启用,而当用户在选择区域外单击时,按钮会被禁用。
这是我的代码
import { DetailsList,SelectionMode,Selection,ISelection,initializeIcons,PrimaryButton } from '@fluentui/react'
import {useMemo } from 'react'
import { useBoolean } from '@uifabric/react-hooks'
interface ICurrency {
type: string,amount: number
}
function App() {
initializeIcons()
const [isBtn,{ setTrue: disableBtn,setFalse: enableBtn }] = useBoolean(true)
const items: ICurrency[] = [
{
type: 'INR',amount: 20
},{
type: 'USD',amount: 50
},{
type: 'GBP',amount: 70
}
]
const selection: ISelection = useMemo(() => new Selection(
{
onSelectionChanged: ()=>{
if(selection.getSelectedCount() > 0){
enableBtn()
}else{
disableBtn()
}
}
}
),[items])
return (
<div className="App">
<PrimaryButton text="Button" disabled={isBtn}/>
<DetailsList
items={items} selectionMode={SelectionMode.single}
selection={selection}
/>
</div>
);
}
export default App;
我什至使用了 useMemo 并继续敲我的头,但问题仍然存在,点击任何行都会丢失状态并且按钮未启用。我已经尝试存储选择的状态,计数,一切,但似乎我错过了一些重要或基本的实施
解决方法
您需要记住 items
,因为在每次渲染时它都会被重新分配并被视为一个新数组,这会导致您的 selection
发生变化,因为它依赖于 items
作为 {{1 }} 依赖。在每次状态更新时,选择都会重置。
因此,您可以解决此问题的一种方法是将项目移出函数,以便它保存引用,而不是在每次渲染时创建新的项目数组。
useMemo
或在这些项目上使用 const items = [
{
type: "INR",amount: 20
},{
type: "USD",amount: 50
},{
type: "GBP",amount: 70
}
];
function App() {
// code
}
:
useMemo
我也看到你有一个错误,const items = useMemo(() => [
{
type: "INR",amount: 70
}
],[]);
应该只被调用一次。所以应该放在 initializeIcons
:
useEffect
The final code sample 应如下所示:
useEffect(() => {
initializeIcons();
},[])
,
接受的答案对这个问题有正确的推理。我也只是想发布我的解决方案。我只需要存储项目的状态
import { DetailsList,SelectionMode,Selection,initializeIcons,PrimaryButton } from '@fluentui/react'
import { useEffect,useState } from 'react'
import { useBoolean } from '@uifabric/react-hooks'
interface ICurrency {
type: string,amount: number
}
function App() {
useEffect(() => {
initializeIcons();
},[]);
const [isBtn,{ setTrue: disableBtn,setFalse: enableBtn }] = useBoolean(true)
let _selection = new Selection({
onSelectionChanged: () => {
if (_selection.getSelectedCount() > 0) {
enableBtn()
} else {
disableBtn()
}
}
});
let _initialItems: ICurrency[] = [
{
type: 'INR',amount: 20
},{
type: 'USD',amount: 50
},{
type: 'GBP',amount: 70
}
]
const [items,setItems] = useState(_initialItems)
return (
<>
<PrimaryButton text="Button" disabled={isBtn} />
<DetailsList
items={items}
selection={_selection}
selectionMode={SelectionMode.single}
/>
</>
);
}
export default App;
现在说如果项目来自某些道具或某些状态管理,那么只需在 useEffect 中使用 setItems 并将依赖项设置为该来源
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。