javascript - 错误的React将事件监听器的行为钩住(Wrong React hooks behaviour with event listener)

Question

I'm playing around with React hooks and faced a problem.(我在玩React钩子，遇到了一个问题。)

It shows the wrong state when I'm trying to console log it using button handled by event listener.(当我尝试使用事件监听器处理的按钮来控制台记录日志时，它显示错误的状态。) CodeSandbox: https://codesandbox.io/s/lrxw1wr97m(CodeSandbox： https ：//codesandbox.io/s/lrxw1wr97m) Click on 'Add card' button 2 times(点击“添加卡”按钮两次) In first card, click on Button1 and see in console that there are 2 cards in state (correct behaviour)(在第一张卡中，单击Button1，然后在控制台中查看有2张卡处于状态（正确行为）) In first card, click on Button2 (handled by event listener) and see in console that there are only 1 card in state (wrong behaviour)(在第一张卡中，单击Button2（由事件侦听器处理），然后在控制台中看到只有1张卡处于状态（错误行为）) Why does it show the wrong state?(为什么显示错误状态？) In first card, Button2 should display 2 cards in console.(在第一张卡中，Button2应该在控制台中显示2张卡。) Any ideas?(有任何想法吗？) import React, { useState, useContext, useRef, useEffect } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const CardsContext = React.createContext(); const CardsProvider = props => { const [cards, setCards] = useState([]); const addCard = () => { const id = cards.length; setCards([...cards, { id: id, json: {} }]); }; const handleCardClick = id => console.log(cards); const handleButtonClick = id => console.log(cards); return ( <CardsContext.Provider value={{ cards, addCard, handleCardClick, handleButtonClick }} > {props.children} </CardsContext.Provider> ); }; function App() { const { cards, addCard, handleCardClick, handleButtonClick } = useContext( CardsContext ); return ( <div className="App"> <button onClick={addCard}>Add card</button> {cards.map((card, index) => ( <Card key={card.id} id={card.id} handleCardClick={() => handleCardClick(card.id)} handleButtonClick={() => handleButtonClick(card.id)} /> ))} </div> ); } function Card(props) { const ref = useRef(); useEffect(() => { ref.current.addEventListener("click", props.handleCardClick); return () => { ref.current.removeEventListener("click", props.handleCardClick); }; }, []); return ( <div className="card"> Card {props.id} <div> <button onClick={props.handleButtonClick}>Button1</button> <button ref={node => (ref.current = node)}>Button2</button> </div> </div> ); } ReactDOM.render( <CardsProvider> <App /> </CardsProvider>, document.getElementById("root") ); I use React 16.7.0-alpha.0 and Chrome 70.0.3538.110(我使用React 16.7.0-alpha.0和Chrome 70.0.3538.110) BTW, if I rewrite the CardsProvider using сlass, the problem is gone.(顺便说一句，如果我使用?lass重写CardsProvider，问题就解决了。) CodeSandbox using class: https://codesandbox.io/s/w2nn3mq9vl(使用类的CodeSandbox： https ：//codesandbox.io/s/w2nn3mq9vl)   ask by Mark Lano translate from so