Antd table 在创建新记录期间呈现 n... tables 而不是 1

Question

在创建新记录和 table 的呈现过程中遇到问题，由于某种原因，记录被添加到新的 table 而不是填充前一个。我该如何解决这个问题？我试图将密钥作为标识符传递：key: id，并向 Table 传递一个 rowKey 参数 - 但一切都不成功。

代码 - BookItem 组件：

    export const BookItem = ({id, title, author }) => {
        const queryClient = useQueryClient()
        const { mutateAsync, isLoading } = useMutation(removeBook)
    
        const remove = async () => {
            await mutateAsync(id)
            queryClient.invalidateQueries('books')
        }
     
    
           const columns = [
                    {
                        title: 'Title',
                        dataIndex: 'title',
                        key: id,
                        render: (data) => <Link component={StyledLink} to={/update-book/${id}} mr="auto">{data}</Link>
                    },
                    {
                        title: 'Author',
                        dataIndex: 'author',
                        key: id
                    },
                    {
                        title: 'Action',
                        render: () => <Button backgroundColor="#cc1c28" onClick={remove}>{ isLoading ? <Loader type="ThreeDots" color="#fff" height={10} /> : "Remove" }</Button>
                    }
                ];
                const data = [
                    {
                        key: id,
                        title: title,
                        author: author,
                    }
                ];
                return (
                    <Table columns={columns} dataSource={data} size="middle" />
            );
};

BookList 组件：

export const BooksList = () => {
    const { data, error, isLoading, isError } = useQuery("books", getAllBooks);

    if (isLoading) {
        return (
            <Container>
                <Flex py="5" justifyContent="center">
                    <Loader type="ThreeDots" color="#cccccc" height={30} />
                </Flex>
            </Container>
        );
    }

    if (isError) {
        return <span>Error: {error.message}</span>;
    }
    return (
        <Container>
                {data.map(({ author, title, id }) => (
                    <BookItem author={author} title={title} key={id} id={id} />
                    ))}


        </Container>
    );

};

Answer 1

只需使用 Table 而不使用 map，如下所示：

<Container>
  <Table columns={columns} dataSource={data} size="middle" />
</Container>

Antd table 在创建新记录期间呈现 n... tables 而不是 1

Antd table rendered n... tables during creation new records instead of 1

reactjs

antd