React onClick()在map函数内部时不触发

我想创建一个简单的应用程序,在那里我可以在侧边栏中单击一本书的标题,并查看该书的摘要。我通过一个我在本地定义的API来获取书名和摘要。

现在,点击书名什么也做不了。控制台中出现红色错误:

index.js:1 Warning: Each child in a list should have a unique "key" prop.

我这样调用我的API:

  const [viewingId, setViewingId] = useState()
  const [bookList, setBookList] = useState([])
  const [contents, setContents] = useState({})

  useEffect(() => {

    fetch("http://localhost:5000/books")
    .then(res => res.json())
    .then(res => {setBookList(res)})
  }, [])

  const fetchBookSummary = (id) => {
    fetch(`http://localhost:5000/book/${id}`)
    .then(res => res.json())
    .then(res => {
      setContents({...contents, [id]: res[0]})
    })
  }

  const seeSummary = (id) => {
    fetchBookSummary(id)
    setViewingId(id)
  }

最后,我的应用程序呈现如下:

  return (
    <div className="App">
      <div className="App-Container">
        <div className="BookList">
          {bookList.map(book => (
            <Node book={book} onClick={() => seeSummary(book.id)} />
          ))}
        </div>

        <div className="SummaryView">
          {contents[viewingId]?.content?.map((summaryData => (
              <Summary summaryData={summaryData}/>
          )))}
        </div>
      </div>
    </div>
  );
}

我以前只是 onClick={seeSummary(book.id)} ,但我得到了一个“太多重新渲染”的错误…我不知道我明白什么添加 () => 做。

我想当我点击一本书时能看到摘要。感谢您的帮助!