Используйте effect + usestate ошибка броска: сделано меньше крючков, чем ожидалось. Это может быть вызвано случайным зая ⇐ Javascript

[Anonymous]

Я строю приложение для орфографической пчелы, где пользователь может просмотреть таблицу, отображающую историю слов, которые они написали. Я пытаюсь отфильтровать данные, которые будут показаны на основе значений, которые они выбирают с флажками (простые, средние, жесткие). < /P>
В моем коде я могу отфильтровать массив и консоли.log () его внутри использования. Я также использую таблицу Tanstack, если это важно. < /P>
Вот useeffect () < /p>
const ProgressTable = ({ data, isLoading, error }) => {
console.log(data)
const [globalFilter, setGlobalFilter] = useState('')
const [selectedDifficulties, setSelectedDifficulties] = useState([])
const [filteredData, setFilteredData] = useState(data)

useEffect(() => {
if (selectedDifficulties.length) {
let newData = filteredData.filter((row) => {
return selectedDifficulties.includes(row.level)
})
console.log('new', newData)
setFilteredData(newData)
} else {
console.log('old', data)
setFilteredData(data)
}
}, [selectedDifficulties])
< /code>
Вот как я обновляю состояние уровня "сложно" < /p>
const toggleDifficulty = (level) => {
setSelectedDifficulties((prev) => {
console.log(prev)
return prev.includes(level) ? prev.filter((l) => l !== level) : [...prev, level]
})
}
< /code>
, которое называется событием OnChange для флажок.import React, { useMemo, useState, useCallback, useEffect } from 'react'
import {
useReactTable,
getCoreRowModel,
getSortedRowModel,
getFilteredRowModel,
getPaginationRowModel,
flexRender,
} from '@tanstack/react-table'

const ProgressTable = ({ data, isLoading, error }) => {
console.log(data)
const [globalFilter, setGlobalFilter] = useState('')
const [selectedDifficulties, setSelectedDifficulties] = useState([])
const [filteredData, setFilteredData] = useState(data)

useEffect(() => {
if (selectedDifficulties.length) {
let newData = filteredData.filter((row) => {
return selectedDifficulties.includes(row.level)
})
console.log('new', newData)
setFilteredData(newData)
} else {
console.log('old', data)
setFilteredData(data)
}
}, [selectedDifficulties])

const columns = useMemo(
() => [
{ accessorKey: 'created_at', header: 'Date' },
{
accessorKey: 'word',
header: 'Word',
cell: ({ row }) => (

{row.original.level} {row.original.word}

),
},
{ accessorKey: 'is_correct', header: 'Result' },
{
accessorKey: 'acceptance',
header: 'Acceptance',
cell: ({ row }) => {row.original.acceptance + '%'},
},
{
accessorKey: 'level',
header: 'Difficulty',
},
],
[],
)

const table = useMemo(
() =>
useReactTable({
data: filteredData || [],
columns,
state: {
globalFilter,
},
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onGlobalFilterChange: setGlobalFilter,
}),
[data, columns, globalFilter, selectedDifficulties],
)

const toggleDifficulty = (level) => {
setSelectedDifficulties((prev) => {
return prev.includes(level) ? prev.filter((l) => l !== level) : [...prev, level]
})
}

return (


Difficulty

toggleDifficulty('easy')}
/>
Easy


toggleDifficulty('medium')}
/>
Medium


toggleDifficulty('hard')}
/>
Hard


setGlobalFilter(e.target.value)}
className='mb-4'
/>



{table.getHeaderGroups().map((headerGroup) => (

{headerGroup.headers.map((header) => (

{flexRender(
header.column.columnDef.header,
header.getContext(),
)}

))}

))}


{table.getRowModel().rows.map((row) => (

{row.getVisibleCells().map((cell) => (

{flexRender(cell.column.columnDef.cell, cell.getContext())}

))}

))}



table.previousPage()} disabled={!table.getCanPreviousPage()}>
Previous


Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}

table.nextPage()} disabled={!table.getCanNextPage()}>
Next



)
}

export default ProgressTable


Подробнее здесь: https://stackoverflow.com/questions/795 ... ed-this-ma