useState 在 Material-ui 下无法正常运行

Question

我有一个对象数组，每当我 select 使用 material ui 的值时，我正在对其进行过滤以显示特定数据，但问题是在第一个 select 它工作并制作过滤器并向我显示所需的值但在第二个渲染中它没有显示任何东西：

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>
    )

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])
        }
    }

useState 在 Material-ui 下无法正常运行

useState does not function correctly with Material-ui

reactjs

material-ui

use-state