javascript - React - 将对象转换为字符串以在 DevExpress React Grid 中显示

Question

我刚刚开始使用 React 和 DevExpress React Grid。

但是我遇到了一个问题，当我尝试显示网格时出现错误: 对象作为 React 子对象无效。

现在看来我需要将数据中对象的任何实例转换为字符串，即:.toString()。

但是，在 DevExpress 的 React Grid 中是否有内置方法可以执行此操作，或者我是否需要手动编写一些代码来运行我的数据并更新它。

仅供引用 - 我正在使用的数据(显示在我的表格中)如下所示:

chapters: [{
        id: "chapterId1",
        code: "chapterCode",
        policies: {
            startTime: "2016-08-29T09:12:33.001Z",
            endTime: "2016-08-29T09:12:33.001Z",
        },
}]

谢谢。

Answer 1

问题可能出在 policies 键上。看来该库正在尝试直接呈现该值，但该值是一个对象。

一种选择是手动将此值“展平”为单个值或两个单独的值。例如:

{
  id: "chapterId1",
  code: "chapterCode",
  policies: "2016-08-29T09:12:33.001Z - 2016-08-29T09:12:33.001Z"
}

如果您想要不同的列，另一种方法是:

{
  id: "chapterId1",
  code: "chapterCode",
  policiesStart: "2016-08-29T09:12:33.001Z",
  policiesEnd: "2016-08-29T09:12:33.001Z"
}

我没有完整的上下文，但假设您想格式化这些日期，您可以创建一个助手(例如:transformRows)，它接受您当前的输入并构造这个新输入(并执行额外的操作)就像日期格式一样工作):

const chapters = [
  {
    id: "chapterId1",
    code: "chapterCode",
    policies: {
      startTime: "2016-08-29T09:12:33.001Z",
      endTime: "2016-08-29T09:12:33.001Z"
    }
  }
];

const transformRows = rows =>
  rows.map(({ policies, ...rest }) => ({
    policiesStart: policies.startTime,
    policiesEnd: policies.endTime,
    ...rest
  }));

const App = () => (
  <Grid
    rows={transformRows(chapters)}
    columns={[
      { name: "id", title: "ID" },
      { name: "code", title: "Code" },
      { name: "policiesStart", title: "Policies" },
      { name: "policiesEnd", title: "Policies" }
    ]}
  >
    <Table />
    <TableHeaderRow />
  </Grid>
);