useState 在 Material-ui 中无法正常工作

Question

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

数据.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>
    )

Answer 1

您需要过滤到您的 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])
        }
    }