使用扩展运算符从 API 操作/过滤对象的道具

如何解决使用扩展运算符从 API 操作/过滤对象的道具

在做 React/Next 课程时，我们必须获取一个 API，返回一个对象列表，以及填充页面的数据。

它是在 Next 的 getStaticProps 上完成的，并作为 props 传递给前端，操纵一些数据以使其最适合，并忽略一些数据。 但是要传入一堆没有触及的 os 道具，需要一些额外的输入：

data.map(episode=>{
    return {
      id: episode.id,title: episode.title,thumbnail: episode.thumbnail,members: episode.title,description: episode.description,url: episode.file.url,publishedAt: format( parseISO(episode.published_at),'d MMM yy',{locale: ptBR } ),duration: Number(episode.file.duration),durationAsstring: convertDurationToTimeString( Number(episode.file.duration) ),};
})

所以我虽然使用 JS 的扩展操作来使这段代码简短，并且减少字数。 但我担心这种方法会对性能、可读性、代码可维护性/测试以及所有这些方面产生任何影响。 因为这看起来并不难想出，所以如果老师不做，我可能会遇到一些问题吧？！

所以请看一下这段代码，如果确实是一个更好的解决方案，那就说明那里有问题：

const episodes = data.map(episode=>{
    const {
      file,published_at: publishedAt,...rest

    } = episode;

    return {
      ...rest,url: file.url,duration: Number(file.duration),publishedAt: format( parseISO(publishedAt),durationAsstring: convertDurationToTimeString( Number(file.duration) ),}
}

---

这里有行注释，如果它有助于理解它的含义：

const episodes = data.map(episode=>{

    // filter out the data
    const {
      // attrs to remove from final
      file,// . to rename
      published_at: publishedAt,// to keep as is
      ...rest

    } = episode;

    // threat/manipulate and add data
    return {
      ...rest,}
}

解决方法

Stack(
children: [
  Container(),//the page under the DraggableScrollableSheet goes here
  Container(
    height: MediaQuery.of(context).size.height,child: DraggableScrollableSheet(
      builder: (BuildContext context,myscrollController) {
        return Container(
          color: Colors.blue,child: ListView.builder(
            controller: myscrollController,itemCount: 40,itemBuilder:(BuildContext context,int index) {
              return ListTile(title: Text('Item $index',style: TextStyle(color: Colors.black),));
            },),);
      },],

这是我能建议的最简洁的方法，但您自己的代码具有足够的可读性，而且据我所知，传播对象没有性能成本。

,

还有一点需要注意的是，如果您只想返回第一个示例中列出的 9 个属性，那么如果 episode 具有更多属性（一开始您将它们散布进入 ...rest，然后用 ...rest 解构回来）。但如果是故意的，那么这种做事方式完全没问题。