React父组件传值给子组件后变量undefined问题求助

你的传值方式存在核心问题——key是React的内置特殊属性，React会保留该属性用于内部列表元素的识别与优化逻辑，不会将它作为自定义props传递给子组件，这就是子组件中key始终显示undefined的原因。

修改步骤： #

1. 父组件调整属性名称：将传递的key替换为非React保留的名称（比如appKey）

function AppWindow() {
  const [key, setKey] = useState('test');
  return (
      <Box sx={{}}>
            <Settings2 appKey={key} setKey={setKey}/>
      </Box>
  )
}

2. 子组件对应接收修改后的属性：

function Settings2({appKey, setKey}) {
const handleChange = (e) => {
        setKey('e');
        console.log(appKey);
      };
return(
<form>
                                    <Input
                                            variant= 'standard'
                                            type='text'
                                            disablePortal
                                            id="combo-box-demo"
                                            sx={{ width: '100%', input: {color: '#d4e1ed'} }}
                                            placeholder='Enter Your Key'
                                            onChange={(e) => handleChange(e)}
                                    />
                                 </form>
...
)
}

修改完成后，子组件就能正常接收父组件传递的状态值了。额外提醒：调用setKey后立刻console.log只能拿到旧状态，因为setState是异步操作，若要查看更新后的状态，可通过useEffect监听状态变化实现。

内容的提问来源于stack exchange，提问作者hullergabby123