在 React 中为已记忆的值分配另一个值

Question

我有以下方法

  const filteredTableData = useMemo(() => {
    const dataToParse = JSON.parse(JSON.stringify(data || []))

    if (globalFilter?.length && isSearcheable) {
      return (dataToParse as OptRow[]).filter(item => {
        return Object.values(item).some(value => String(value).toLowerCase().includes(globalFilter.toLowerCase()))
      })
    }

    return dataToParse
  }, [data, globalFilter, isSearcheable])

  const checkedTableData = useCheckTableData(filteredTableData, gridRef)

  if (!!checkedTableData.differences) {
    console.log('>> save from excel')
    console.log('>> differences', checkedTableData.differences)
    console.log('>> actual', checkedTableData.actualTableData)
    handleChange(checkedTableData.differences)


    
    // gridRef.current?.gridInst.resetData(filteredTableData)
    // setFocusedCell(undefined)
  }

在handleChange之后，我想将filteredTableData设置为等于checkedTableData.differences，以避免一次多次调用handleChange。

用于获取差异和实际值的自定义钩子是

export interface ICheckTableData {
  differences?: OptRow[]
  actualTableData?: OptRow[]
}

export function useCheckTableData(initialTableData: OptRow[], gridRef: MutableRefObject<any>): ICheckTableData {
  const initialTableValue = JSON.parse(JSON.stringify(initialTableData))
  const actualTableData = []
  const differences = []
  const keysToIgnore = ['_', '@', 'uniqueKey', 'rowSpanMap', 'rowKey', 'sortKey']

  for (let rowIndex = 0; rowIndex < initialTableData?.length; rowIndex++) {
    const row = gridRef.current?.gridInst.getRow(rowIndex)
    if (row) {
      actualTableData.push(row)
    }
  }

  for (let i = 0; i < actualTableData.length; i++) {
    const initialObj = initialTableValue[i]
    const actualObj = actualTableData[i]

    for (const key in actualObj) {
      if (
        !keysToIgnore.some(ignoreKey => key.startsWith(ignoreKey)) &&
        actualObj[key] !== null &&
        (initialObj[key] === undefined || initialObj[key] !== actualObj[key])
      ) {
        differences.push({
          value: actualObj[key],
          columnName: key,
          rowKey: i,
          rowData: actualObj,
          operation: determineOperation(initialObj[key], actualObj[key]),
        })
      }
    }
  }

  const oldDiferences = usePrevious(differences)

  if (differences.length > 0 && oldDiferences !== differences) {
    return { differences, actualTableData }
  }

  return { actualTableData }
}

export const useHasChanged = (val: OptRow[]): boolean => {
  const prevVal = usePrevious(val)
  return prevVal !== val
}

请有人给我一个提示，我怎样才能实现这个目标？

Answer 1

您可以这样调用

filteredTableData

后将

checkedTableData.differences

更新为等于

handleChange(checkedTableData.differences)

：

const filteredTableData = useMemo(() => {
  const dataToParse = JSON.parse(JSON.stringify(data || []))

  if (globalFilter?.length && isSearcheable) {
    return (dataToParse as OptRow[]).filter(item => {
      return Object.values(item).some(value => String(value).toLowerCase().includes(globalFilter.toLowerCase()))
    })
  }

  return dataToParse
}, [data, globalFilter, isSearcheable])

const checkedTableData = useCheckTableData(filteredTableData, gridRef)

useEffect(() => {
  if (!!checkedTableData.differences) {
    console.log('>> save from excel')
    console.log('>> differences', checkedTableData.differences)
    console.log('>> actual', checkedTableData.actualTableData)
    handleChange(checkedTableData.differences)

    // Update filteredTableData after calling handleChange
    setFilteredTableData(checkedTableData.differences);
    // gridRef.current?.gridInst.resetData(filteredTableData)
    // setFocusedCell(undefined)
  }
}, [checkedTableData.differences, handleChange]);

// ...

确保像这样定义

setFilteredTableData

：

const [filteredTableData, setFilteredTableData] = useState(/* initial value here */);