输入“字符串|” 日期”不可分配给类型“ReactNode”.. Typescript

Question

从 API 获取新闻标题并每页显示 10 条新闻及其 ID。同样是 10 秒刷新，新的头条新闻出现。TableHead 映射内容看起来不错，但 tableBody 提供了此错误：

输入“字符串|” 日期”不可分配给类型“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 },
];

桌头部分: 精细

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