代码之家  ›  专栏  ›  技术社区  ›  ellen

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

  •  2
  • ellen  · 技术社区  · 4 年前

    我想创建一个简单的应用程序,在那里我可以在侧边栏中单击一本书的标题,并查看该书的摘要。我通过一个我在本地定义的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)} ,但我得到了一个“太多重新渲染”的错误…我不知道我明白什么添加 () => 做。

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

    1 回复  |  直到 4 年前
        1
  •  1
  •   Drew Reese    4 年前

    要解决React key警告,只需为要映射的元素提供有效的React key。

    {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 单击该节点。

    我看不出任何明显的问题,你已经定义了你的onClick处理程序以外的其他抓取书的细节将需要更长的时间更新摘要id。

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

    我怀疑你没有连接到 onClick Node button div 等等。。。你需要确保 单击 道具是 附属于 某物

    例子:

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