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

Question

有人可以解释为什么key箭头函数内的值未定义：

// in parent component

const 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 component

interface 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.keyhttps://reactjs.org/warnings/special-props.html这可能是它在后续渲染中不起作用的原因——我很惊讶它在第一次渲染中完全起作用！这工作正常：// https://codepen.io/d4rek/pen/PoZRWQwimport { nanoid } from 'https://cdn.jsdelivr.net/npm/nanoid/nanoid.js'const Child = ({ id }) => {&nbsp; console.log(`within component: ${id}`)&nbsp; const cb = () => console.log(`in callback: ${id}`)&nbsp; return <button onClick={cb}>Click me</button>}const Parent = () => {&nbsp; const [id, setId] = React.useState(null)&nbsp;&nbsp;&nbsp; React.useEffect(() => {&nbsp; &nbsp; setId(nanoid(6))&nbsp; }, [])&nbsp;&nbsp;&nbsp; return (<Child id={id} />)}ReactDOM.render(<Parent />, document.body)

Answer 2

你的不工作的原因：道具是绑定的，this但是你定义的回调有它自己的范围，因此有它自己的this.&nbsp;因此，您需要为该范围提供值。您可以通过使用组件的本地状态来做到这一点。由于 React 中有一些很好的钩子可以让你轻松完成，你应该使用它们来记住回调：React.useCallback(() =>{console.log(key);}, [key]);请注意在key更改时更新回调的依赖数组。这里的范围很好。

Answer 3

import React, { useCallback } from 'react';const callback = useCallback(() => {&nbsp; &nbsp; // this isn't working, key is undefined&nbsp; &nbsp; console.log("value within callback: " + key);}, [key]);