Material UI Table 添加新记录时不更新

Question

我正在使用 Material-UI table 呈现从 API> 检索到的数据。有一个用于添加新条目的表单，但是当它添加到数据中时，table 不是 updating/re-rendering，我不明白为什么。

这是为 brevity/clarity...

编辑的

    const [data, setData] = useState();

    useEffect(() => {
        const fetchSummary = async () => {
            setLoading(true);
            const response = await axios
                .get<TSalesSummary[]>(`/sales/${$reporterId}`, {})
                .then((result) => {
                    setData(result.data);
                })
                .catch((error) => {
                    console.error('Retrieve Request Failed');
                    setError(error);
                })
                .finally(() => {
                    setLoading(false);
                })
        }

        if (!data) {
            fetchSummary();
        }

    }, [reporterId]);

    const onSubmit = async (values: any, actions: any) => {

        const result = await axios
            .post<TSalesSummary>(`/sales/` + props.identifier + '/invite', {
                first_name: values.firstName,
                last_name: values.lastName,
                email: values.email
            })
            .then((result ) => {
               data?.unshift(result.data);
               setData(data);
               setPage(0);
            })
            .catch((error) => {

            });
    }

组件：

            <TableContainer component={Paper}>
                <Table sx={{minWidth: 650}} aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell sx={{fontWeight: 700}}>
                                First Name
                            </TableCell>
                            <TableCell align="left" sx={{fontWeight: 700}}>
                                Last Name
                            </TableCell>
                            <TableCell align="left" sx={{fontWeight: 700}}>
                                Email
                            </TableCell>
                            <TableCell align="left" sx={{fontWeight: 700}}>
                                Status
                            </TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {(data
                            ? data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                            : data
                        ).map((row) => (
                        <TableRow
                            key={row.identifier}
                            sx={{
                                '&:last-child td, &:last-child th': {border: 0},
                            }}
                        >
                            <TableCell component="th" scope="row">{ row.first_name }</TableCell>
                            <TableCell align="left">{ row.last_name }</TableCell>
                            <TableCell align="left">{ row.email }</TableCell>
 
                        </TableRow>
                        ))}
                        {data.length === 0 &&
                            <TableRow>
                                <TableCell rowSpan={3}>No records found</TableCell>
                            </TableRow>
                        }
                    </TableBody>
                    <TableFooter>
                        <TableRow>
                            <TablePagination
                                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
                                colSpan={3}
                                count={data.length}
                                rowsPerPage={rowsPerPage}
                                page={page}
                                SelectProps={{
                                    inputProps: {
                                        'aria-label': 'rows per page',
                                    },
                                    native: true,
                                }}
                                onPageChange={handleChangePage}
                                onRowsPerPageChange={handleChangeRowsPerPage}
                            />
                        </TableRow>
                    </TableFooter>
                </Table>
            </TableContainer>

当 onSubmit 运行时，数据会更新（我可以在控制台中看到）但 table 不会重新呈现。我需要做什么才能让 table 也更新？

Answer 1

在 onSubmit 处理程序中，您正在改变状态变量 data 并尝试更新已改变的 data.

data?.unshift(result.data);
setData(data);

它不会起作用，因为要做出反应，数组对象不会改变（对数组的引用保持不变）。更新状态变量的正确方法是将其设置为新的 data 数组。

const newData = [...result.data, ...data];
setData(newData);

根据 React docs,

Never mutate state directly, as calling setState() afterwards may replace the mutation you made. Treat state as if it were immutable.

Material UI Table 添加新记录时不更新

Material UI Table not Updating when new records added

typescript

reactjs

material-ui