React Native猜词应用：正确猜词仍触发错误提示与音效问题求助

核心问题 #

你的代码存在两个关键错误，导致正确猜词时仍触发错误提示：

1. Hook调用违反规则：在playSound和playCorrectSound普通函数内部定义了React.useEffect，React要求Hook只能在组件顶层或自定义Hook中调用，嵌套调用会引发组件渲染异常和副作用混乱。
2. 状态赋值错误：playCorrectSound中使用setSound(correctSound)更新状态，但正确的状态更新函数应为setCorrectSound(correctSound)，这会覆盖错误音效的状态变量，引发逻辑混乱。

修复步骤与代码示例 #

1. 调整Hook位置到组件顶层

将音效清理的useEffect移至组件顶层作用域，避免嵌套调用：

const [sound, setSound] = React.useState();
const [correctSound, setCorrectSound] = React.useState();

// 清理错误音效资源
React.useEffect(() => {
  return sound
    ? () => {
        console.log('Unloading incorrect sound');
        sound.unloadAsync();
      }
    : undefined;
}, [sound]);

// 清理正确音效资源
React.useEffect(() => {
  return correctSound
    ? () => {
        console.log('Unloading correct sound');
        correctSound.unloadAsync();
      }
    : undefined;
}, [correctSound]);

2. 修正音效播放函数

修复状态赋值错误，简化播放逻辑：

async function playSound() {
  const { sound: newSound } = await Audio.Sound.createAsync(
    require('../../../assets/sounds/incorrect.mp3')
  );
  setSound(newSound);
  await newSound.playAsync();
}

async function playCorrectSound() {
  console.log('Loading correct sound');
  const { sound: newCorrectSound } = await Audio.Sound.createAsync(
    require('../../../assets/sounds/positive-beeps.mp3')
  );
  setCorrectSound(newCorrectSound); // 修正为正确的状态更新函数
  await newCorrectSound.playAsync();
}

3. 优化输入提交事件（可选但推荐）

将onEndEditing替换为onSubmitEditing，这是React Native中专门处理回车提交的事件，更符合你的业务场景：

<TextInputGuess 
  label="Guess!" 
  mode="outlined" 
  onSubmitEditing={checkWord}
  onChangeText={text => setInput(text)}
  returnKeyType="done"
/>

4. 校验判断逻辑（排查用）

可以在checkWord中增加更详细的日志，确认输入与目标单词的实际匹配情况：

const checkWord = () => {
  const targetWord = currentCard.word.trim().toLowerCase();
  const userInput = input.trim().toLowerCase();
  console.log('目标单词:', targetWord);
  console.log('用户输入:', userInput);
  
  if (targetWord === userInput) {
     CorrectWord();
  } else {
     WrongWord();
  }
};

修复原理说明 #

• 把useEffect移到组件顶层后，React能正确管理Hook的调用顺序，确保音效资源的清理逻辑正常执行，不会引发意外副作用。
• 修正状态赋值后，正确音效和错误音效的状态变量各自独立，避免了状态覆盖导致的逻辑混乱。

内容的提问来源于stack exchange，提问作者Göktuğ İlbeği