如何为从外部API获取的数据添加自增id字段？

我使用以下代码从自行搭建的API获取书籍数据：

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(BOOKS_API);
      setBookData(result.data);
    };
    fetchData();
  }, []);

API返回的原始数据格式如下：

[
  {
    "bookName": "Thus Spoke Zarathustra",
    "bookGenre": "Philosophical",
    "pageCount": 327,
    "bookAuthorName": "Friedrich Nietzsche",
    "isbnNumber": "9780521602617"
  },
  {
    "bookName": "Beyond good and evil",
    "bookGenre": "Philosophical",
    "pageCount": 301,
    "bookAuthorName": "Friedrich Nietzsche",
    "isbnNumber": "9780394703374"
  }
]

我的网站需要给每条数据添加从1开始的自增id属性，最终数据格式如下：

{
    id: 1,
    bookName: 'Thus Spoke Zarathustra',
    bookGenre: 'Philosophical',
    pageCount: 327,
    bookAuthorName: 'Friedrich Nietzsche',
    isbnNumber: '9780521602617',
}

请问如何实现为获取的数据添加自增id字段？

解决方案 #

可以利用数组的map方法，结合元素的索引值生成自增id，修改后的代码如下：

useEffect(() => {
    const fetchData = async () => {
      const result = await axios(BOOKS_API);
      // 遍历数据，为每个条目添加从1开始的自增id
      const booksWithId = result.data.map((book, index) => ({
        ...book,
        id: index + 1
      }));
      setBookData(booksWithId);
    };
    fetchData();
  }, []);

说明： #

• map方法的第二个参数是当前元素的索引（从0开始），index + 1即可得到从1起始的自增id
• 用扩展运算符...book保留原数据的所有字段，再新增id字段，不会覆盖原有内容
• 如果需要更稳定的id（比如API数据可能出现顺序变动），也可以用每条数据唯一的isbnNumber作为id值，替换id: index + 1为id: book.isbnNumber即可

内容的提问来源于stack exchange，提问作者MTomys