Reactjs useState在材质ui中无法正常工作

我有一个对象数组，每当我使用material ui选择一个值时，我都会对其进行过滤，以显示特定的数据，但问题是，在第一次选择时，它会起作用并生成过滤器，并向我显示所需的值，但在第二次渲染时，它不会向我显示任何内容：

data.js

export const testData = [
    {
        cl: 'peper',
        cln: 'a',
    },
    {
        cl: 'tomatoas',
        cln: 'a',
    },
    {
        cl: 'peper',
        cln: 'a',
    },
 {
        cl: 'tomatoas',
        cln: 'a',
    },
];

App.js：

 const [data, setData] = useState([...testData])
    const [value, setValue] = useState('')

    const filterValue = (value: any) => {
        if (value) {
            const filtered = data.filter(d => value === d.cl)
            setData(filtered)
        } else {
            setData([...testData])
        }
    }

const columns = [
        {
            title: 'cl',
            field: 'cl',
            filterComponent: (props: any) => {
                return (
                    <FormControl>
                        <InputLabel>vegetables</InputLabel>
                        <Select onChange={e => filterValue(e.target.value)}>
                            <MenuItem value={'peper'}>peper</MenuItem>
                            <MenuItem value={'tomatoas'}>tomatoas</MenuItem>
                        </Select>
                    </FormControl>
                )
            }
        },
        { title: 'cln', field: 'cln', filtering: true },
]
 return (
        <div className="App">
            <MaterialTable
                columns={columns}
                data={data}
                options={{
                    filtering: true
                }}
            />
            Selected: {value}
        </div>
    )

const[data，setData]=useState（[…testData]）
const[value，setValue]=useState（“”）
常量filterValue=（值：任意）=>{
如果（值）{
const filtered=data.filter（d=>value==d.cl）
设置数据（已过滤）
}否则{
setData（[…testData]）
}
}
常量列=[
{
标题：“cl”，
字段：“cl”，
过滤器组件：（道具：任意）=>{
返回(
蔬菜
filterValue（e.target.value）}>
佩珀
托马斯
)
}
},
{title:'cln'，field:'cln'，filtering:true}，
]
返回(
所选：{value}
)

您需要筛选到testData数组，而不是数据状态数组。它第一次工作是因为它最初被设置为[…testData]，但之后已经被过滤。因此，当您再次运行过滤器时，您正在对过滤后的数据运行过滤器

尝试在testData上运行筛选器

 const [data, setData] = useState([...testData])
    const [value, setValue] = useState('')

    const filterValue = (value: any) => {
        if (value) {
            const filtered = testData.filter(d => value === d.cl)
            setData(filtered)
        } else {
            setData([...testData])
        }
    }

---

这回答了你的问题吗？不，它实际上没有：（概念仍然相同。如果它是派生数据，则不应将其存储为状态。状态应为选定的筛选器。