在 React 上解构我的数据时遇到问题

Question

upcomingWork 包含我的 api 数据。我在这里想要的是将其作为数组插入以显示在我的日历上，下面是我想要的结构化数据的示例。

实际上，upcomingWork 包含很多属性，但我只想让这三个属性显示在我的日历上。

const data = upcomingWork.map(u => u.id && u.title && u.created_at);

我想从 data.

创建的数组示例

  const events = [
    {
      id: 1,
      title: 'My event',
      start: new Date(2020, 4, 8, 10, 0),
      end: new Date(2020, 4, 8, 14, 0),
    },
  ];

Answer 1

如果所有值都为真，则您拥有的地图将简单地将每个值设置为真，如果其中任何一个为假，则将其设置为假。如果您想提取这 3 个值，只需将地图更改为：

const data = upcomingWork.map(({id, title, created_at}) => ({id, title, created_at}))

Answer 2

无论您返回什么，都不会为您提供任何所需的数据。我想你误解了 Array 的 map 方法。

相反，您应该像这样使用地图：

const data = upcomingWork.map(u => {
             const {id, title, created_at} = u;
                 return {
                   id,
                   title,
                   created_at
                 }
              });

Answer 3

const data = upcomingWork.map(u => {
    return { id: u.id, title: u.title };
});

Answer 4

您的 upcomingWork.map 根本没有创建对象，因此它没有机会创建预期的数据。相反，您可以将 u 对象的适当属性映射到您创建的新对象中的新键。

const events = upcomingWork.map(u => ({
    id: u.id,
    title: u.title,
    start: u.created_at,
    end: u.end    //change the u.end to whatever property you have in your data
}));

（新对象必须用()包裹起来，以确保JS将其解释为值，而不是函数体）

在 React 上解构我的数据时遇到问题

Having problem to desctructure my data on React

reactjs

react-big-calendar