在地图函数内部时，React onClick() 不会触发

Question

我正在构建我的第一个 React 应用程序，但遇到了问题。

我想创建一个简单的应用程序，我可以在边栏中单击书名，然后查看该书的摘要。我通过我在本地定义的 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]})
    })
  }

这就是我定义 'onClick' 函数的方式：

  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)}，但出现“重新渲染太多”错误...我不确定我是否理解添加 () => 的作用。

我希望在单击一本书时能够看到摘要。感谢您的帮助！

Answer 1

要解决 React 密钥警告，您只需为要映射的元素提供有效的 React 密钥。

{bookList.map(book => (
  <Node
    key={book.id} // <-- Add a unique key, the book id is good
    book={book}
    onClick={() => seeSummary(book.id)}
  />
))}

当您刚刚 onClick={seeSummary(book.id)} 时，这会立即调用回调，从而导致渲染循环。通过添加“() =>”，您声明了一个匿名函数来调用您的 seeSummary 函数并在节点被单击时 传递特定的图书 ID 。

除了获取图书详细信息所花费的时间比更新摘要 ID 所花费的时间更长之外，我没有发现您定义 onClick 处理程序的方式有任何明显的问题。

const seeSummary = (id) => {
  fetchBookSummary(id); // fetching data
  setViewingId(id); // will update first.
}

我怀疑您没有 connected/attached Node 组件的 onClick 属性到任何 DOM 元素，例如 button 或 div，等等...您需要确保 onClick 道具 实际上 附加到用户可以与之交互的某物 .

示例：

const Node = ({ book, onClick }) => (
  <div onClick={onClick}>
    {book.title} - Click me to see summary!
  </div>
);

在地图函数内部时，React onClick() 不会触发

React onClick() doesn't trigger when inside map function

onclick

reactjs