我正在嘗試從子元素中更新父元素的狀態(tài)。我希望更新在每個(gè)子元素安裝后立即發(fā)生，因此我使用useEffect鉤子并從那里調(diào)用更新函數(shù)setData（從父級(jí)傳遞下來(lái)）。然而，似乎每個(gè)隨后被安裝的子元素都沒(méi)有注意到先前安裝的子元素對(duì)數(shù)據(jù)所做的更改。也就是說(shuō)，它對(duì)一個(gè)空data數(shù)組進(jìn)行操作，而對(duì)于第二個(gè)、第三個(gè)和第四個(gè)元素，該數(shù)組不應(yīng)再為空。我相信這是因?yàn)閟etData僅在所有元素安裝后才計(jì)劃執(zhí)行。這個(gè)對(duì)嗎？如果是這樣，我該如何解決這個(gè)問(wèn)題？ 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/react-dom@16.13.0/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script> </head> <div id="root"></div> </body> </html>
如何在每個(gè)子掛載上更新父母的狀態(tài)，而不是在所有子掛載之后？
浮云間
2022-10-27 15:12:14
