React报TypeError: Cannot read properties of undefined (reading 'length') 问题求助

• Prop默认值缺失：你未给接收的WrongLetters prop设置默认值，当父组件未传递该prop、或传递值为undefined时，直接访问.length、.map都会触发“读取undefined属性”的报错。
• 可选链覆盖不全：你仅在length判断处加了可选链，后续调用.map()的位置未做undefined兼容，只要WrongLetters为undefined，依然会触发相同报错。加可选链后WrongLetters?.length > 0的判断结果为false，对应段落不会渲染，你看到的输出0是错误的reduce逻辑返回的无效值。
• Reduce语法错误：代码中','.curr是错误的属性访问语法，本意是拼接逗号和字母，误用点运算符访问字符串的curr属性会返回undefined，最终reduce处理后得到无效值。
• 命名冲突风险：组件名和接收的prop名完全一致（均为WrongLetters），不符合React prop小驼峰命名规范，极易出现父组件传值时变量名写错、作用域冲突的问题。
• JSX语法错误：你在{WrongLetters.length > 0 && <p>Wrong</p>};末尾加了多余分号，JSX插值表达式内的分号会被当做内容渲染，也可能导致输出异常。

按以下要求修改代码即可：

1. 给解构的prop设置默认值为空数组，从根源避免undefined问题
2. 所有数组操作处统一加可选链兜底
3. 修正reduce的语法错误，正确拼接逗号和字母
4. 将prop名改为小驼峰，避免和组件名冲突，符合命名规范
5. 移除JSX插值内的多余分号

修改后的完整代码如下：

// 组件名保持大写，prop改为小驼峰，设置默认值为空数组
const WrongLetters = ({ wrongLetters = [] }) => {
  return (
    <div className='wrong-letters-container'>
      <div id='wrong-letters'>
        {/* 移除多余分号，加可选链兜底 */}
        {wrongLetters?.length > 0 && <p>Wrong</p>}

        {wrongLetters?.map((letter, i) => (
            <span key={i}>{letter}</span>
          ))
          // 修正reduce语法，正确拼接逗号
          .reduce((prev, curr) => prev === null ? [curr] : [prev, ', ', curr], null)
        }
      </div>
    </div>
  );
}

注意：父组件调用该组件时，传参要对应改为小驼峰，格式为<WrongLetters wrongLetters={你的错误字母数组} />，不要传递大写的WrongLetters参数。

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