为什么 Gatsby 箭头函数看不到 props 中传递的值，其中值是从 Promise 派生的？

Question

有人可以解释为什么key箭头函数内的值未定义：// in parent componentconst Parent = () => {        const [key, setKey] = useState<string>();        // this contains an expensive function we only wish to execute once on first load        useEffect(() => {            // has some promise that will call within a `then()`                        setKey(someVal);        }, []};    // within render    < MyComponent key={key}/>}// within child componentinterface Props {    key: string;}const MyComponent = ({key}: Props) => {    // this works, I can see the correct value `someVal`    console.log("value when rendered: " + key);    const callback = () => {        // this isn't working, key is undefined        console.log("value within callback: " + key);    }  // within render, when something calls callback(), key is undefined, why?  }我可以看到它key在调用渲染时有一个值，但key未定义。我试过使用let callback =而不是const，但没有运气。请问如何访问key？

Answer 1

在 React 中，key是一个保留的 prop 名称。

[...] 未定义试图从组件（即渲染函数或propTypes）访问 this.props.key

https://reactjs.org/warnings/special-props.html

这可能是它在后续渲染中不起作用的原因——我很惊讶它在第一次渲染中完全起作用！

这工作正常：

// 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)

Answer 2

你的不工作的原因：道具是绑定的，this但是你定义的回调有它自己的范围，因此有它自己的this. 因此，您需要为该范围提供值。您可以通过使用组件的本地状态来做到这一点。由于 React 中有一些很好的钩子可以让你轻松完成，你应该使用它们来记住回调：

React.useCallback(() =>{console.log(key);}, [key]);

请注意在key更改时更新回调的依赖数组。这里的范围很好。

Answer 3

import React, { useCallback } from 'react';

const callback = useCallback(() => {

    // this isn't working, key is undefined

    console.log("value within callback: " + key);

}, [key]);