类型 'string | Date' 不可分配给类型 'ReactNode'.. 打字稿

Question

从 API 中获取新闻标题并每页显示 10 条新闻及其 ID。这也会在 10 秒内刷新，并且出现新的头条新闻。 TableHead mapping contents seems fine but tableBody providing this error:

类型 'string | Date' 不可分配给类型 'ReactNode

//Init post
export interface InitPost {
  title: string;
  url: string;
  created_at: Date;
  author: string;
}

//state of post
const [posts, setPosts] = useState<InitPost[]>([]);

//colums
const columns: readonly Column[] = [
  { id: "title", label: "Title", minWidth: 170 },
  { id: "url", label: "URL", minWidth: 150 },
  { id: "created_at", label: "Created At", minWidth: 100 },
  { id: "author", label: "Author", minWidth: 100 },
];

Table头部：很好

                <TableHead>
                  <TableRow>
                    {columns.map((column) => (
                      <TableCell
                        key={column.id}
                        align={column.align}
                        style={{ minWidth: column.minWidth }}
                      >
                        {column.label}
                      </TableCell>
                    ))}
                    <TableCell />
                  </TableRow>
                </TableHead>

错误部分

 <TableBody>
                  {posts.map((row, index) => {
                    return (
                      <TableRow key={index}>
                        {columns.map((column) => {
                          const value = row[column.id];

        ****next line showing Error in "{value}"****

                          return <TableCell key={column.id}>{value}</TableCell>;
                        })}
                        <TableCell>
                          <Button
                            size="small"
                            variant="contained"
                            onClick={() => getDetails(row)}
                          >
                            Details
                          </Button>
                        </TableCell>
                      </TableRow>
                    );
                  })}
                </TableBody>

Answer 1

主要问题是 Date 类型和 string 类型不兼容。

对象，当然 React Elements 除外，无效 children。

您正在呈现的其中一列 (created_at) 属于 Date 类型，不能直接用作 React Child。

您需要以某种方式格式化日期或在大括号之间调用 .toString() 方法以确保您的 children 不是对象。

{
 columns.map((column) => {
   const value = row[column.id];

   return <TableCell key={column.id}>{value.toString()}</TableCell>;
 });
}

类型 'string | Date' 不可分配给类型 'ReactNode'.. 打字稿

Type 'string | Date' is not assignable to type 'ReactNode'.. Typescript

reactjs

react-hooks

react-typescript