DetailsList 正在重新渲染，因此正在失去其状态

编程问答 2022-05-23

问题描述

所以我一直试图实现这样的想法，即每当用户单击 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 并将依赖项设置为该来源

fluent-uifluentui-reactreactjsreactjsreactjsreactjsspfx