3 回答

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超6個(gè)贊
在 React 中,key
是一個(gè)保留的 prop 名稱(chēng)。
[...] 未定義試圖從組件(即渲染函數(shù)或
propTypes
)訪問(wèn) this.props.key
https://reactjs.org/warnings/special-props.html
這可能是它在后續(xù)渲染中不起作用的原因——我很驚訝它在第一次渲染中完全起作用!
這工作正常:
// https://codepen.io/d4rek/pen/PoZRWQw
import { nanoid } from 'https://cdn.jsdelivr.net/npm/nanoid/nanoid.js'
const Child = ({ id }) => {
console.log(`within component: ${id}`)
const cb = () => console.log(`in callback: ${id}`)
return <button onClick={cb}>Click me</button>
}
const Parent = () => {
const [id, setId] = React.useState(null)
React.useEffect(() => {
setId(nanoid(6))
}, [])
return (<Child id={id} />)
}
ReactDOM.render(<Parent />, document.body)

TA貢獻(xiàn)1880條經(jīng)驗(yàn) 獲得超4個(gè)贊
你的不工作的原因:道具是綁定的,this
但是你定義的回調(diào)有它自己的范圍,因此有它自己的this
. 因此,您需要為該范圍提供值。您可以通過(guò)使用組件的本地狀態(tài)來(lái)做到這一點(diǎn)。由于 React 中有一些很好的鉤子可以讓你輕松完成,你應(yīng)該使用它們來(lái)記住回調(diào):
React.useCallback(() =>{console.log(key);}, [key]);
請(qǐng)注意在key
更改時(shí)更新回調(diào)的依賴(lài)數(shù)組。這里的范圍很好。

TA貢獻(xiàn)1784條經(jīng)驗(yàn) 獲得超7個(gè)贊
import React, { useCallback } from 'react';
const callback = useCallback(() => {
// this isn't working, key is undefined
console.log("value within callback: " + key);
}, [key]);
添加回答
舉報(bào)