React开发Hangman游戏报selectedWord.split is not a function错误如何解决？

• React 函数组件仅接收一个 props 聚合对象作为入参，你当前将 selectedWord、correctLetters 直接作为两个独立入参声明，实际运行时第一个参数 selectedWord 拿到的是整个 props 对象，而非预期的字符串类型的单词，对象本身没有 split 方法，直接调用就会触发该类型错误。
• 即使拿到的是字符串，你当前调用 split() 时没有传入空字符串作为分隔符，默认只会返回包含整个字符串的单元素数组，无法拆分出单个字母，不符合猜词游戏的渲染需求。
• 额外问题：你在 JSX 中直接写 ${correctLetters.includes(letter)? letter : ''} 是模板字符串的语法，没有包裹反引号的情况下不会执行插值逻辑，渲染时会直接显示这段文本，而非预期的字母/空内容。

可以直接对 props 做解构拿到对应的属性，调整 split 传参、修正 JSX 表达式即可，修改后代码如下：

// 对第一个props参数做解构拿到对应字段
const Word = ({ selectedWord, correctLetters }) => {
  return (
    <div className='word' id='word'>
      {/* split传空字符串拆分单个字符，修正为JSX支持的表达式写法 */}
      {selectedWord.split('').map((letter, i) => {
        return (
          <span className='letter' key={i}>
            {correctLetters.includes(letter)? letter : ''}
          </span>
        );
      })}  
    </div>
  );
}

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