我正在嘗試從子元素中更新父元素的狀態。我希望更新在每個子元素安裝后立即發生，因此我使用useEffect鉤子并從那里調用更新函數setData（從父級傳遞下來）。然而，似乎每個隨后被安裝的子元素都沒有注意到先前安裝的子元素對數據所做的更改。也就是說，它對一個空data數組進行操作，而對于第二個、第三個和第四個元素，該數組不應再為空。我相信這是因為setData僅在所有元素安裝后才計劃執行。這個對嗎？如果是這樣，我該如何解決這個問題？ function Parent() { const [data, setData] = React.useState([]) function changeData(index, value) { logData() let new_data = Array.from(data) new_data[index] = value setData(new_data) } function logData() { console.log(data) } let children = Array(4).fill(null).map((item, index) => { return <Child id={index} changeData={changeData} /> }) return ( <div> {children} <button onClick={logData}>Log data</button> </div> ) } function Child(props) { const ref = React.useRef(null) React.useEffect(() => { props.changeData(ref.current.id, ref.current.id) }, []) function onClickHandler(e) { let element_id = e.target.id props.changeData(element_id, element_id) } return ( <button ref={ref} id={props.id} onClick={onClickHandler}>Child</button> ) } ReactDOM.render(<Parent />, document.getElementById('root'))<!DOCTYPE html> <html> <body> <head> <script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script> <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/[email protected]/babel.js"></script> </head> <div id="root"></div> </body> </html>
如何在每個子掛載上更新父母的狀態，而不是在所有子掛載之后？
浮云間
2022-10-27 15:12:14
