向下传递useState值为undefined，该父子组件传值方式是否符合React规范

关于实现是否符合React规范 #

你当前采用的「将共享状态提升到最近的公共父组件，再通过props传递状态和修改方法给子组件」的写法，是React官方明确推荐的**状态提升（Lifting State Up）**标准实践，完全符合React单向数据流的设计规范，实现思路没有问题。

子组件获取props为undefined的常见原因 #

你遇到的props为undefined问题和这个设计模式本身无关，属于基础的props传递链路错误，常见原因如下：

• 组件导入导出不匹配：如果你的Child组件用的是默认导出（export default Child），父组件导入时却用了命名导入语法（import { Child } from './xxx'），或者反过来，就会导致引入的组件不是你实际写的Child组件，自然拿不到props；另外路径拼写错误、文件名大小写不匹配也会导致同类问题。
• props名拼写错误：React的props大小写完全敏感，如果你父组件传参时写错了属性名，比如把projectName写成projectname、把setProjectName写成setProjectname，子组件自然接收不到对应属性。
• 子组件被高阶组件包裹但未透传props：如果你给Child组件外层包了memo、styled-components或者自定义高阶组件，但没有把接收的props透传给内部的业务组件，也会导致props丢失。

解决方法 #

按以下步骤排查即可快速定位问题：

1. 先校验组件导入导出逻辑：确认Child组件的导出方式和父组件的导入语法完全匹配，检查文件路径、文件名大小写没有错误。
2. 验证props传递链路：可以在父组件调用Child的位置新增一个测试属性，比如<Child test="testValue" projectName={projectName} setProjectName={setProjectName} />，然后在Child组件顶部打印所有props：console.log(props)，如果连测试属性都拿不到，就可以确定是组件引入或者外层包裹组件的问题。
3. 修正额外逻辑问题：你当前按钮的禁用逻辑是disabled={projectName.length === 6}，也就是输入长度正好为6的时候按钮才禁用，如果你的预期是「输入长度不符合要求时禁用按钮」，可以根据需求调整为disabled={projectName.length < 6}或者disabled={projectName.length !== 6}。

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