React Native点击高亮不符合Silent E规则单词的问题解决请求

我在React Native应用里实现点击高亮功能，目标是标记出不遵循Silent E规则的单词。尝试多种正则表达式后，所有点击单词的isException状态始终为false，无法正确识别不符合规则的单词。相关代码、当前输出及规则说明如下：

原代码 #

import { View, Text, SafeAreaView, ImageBackground,StatusBar,Image,Dimensions, TouchableOpacity,ScrollView, FlatList } from 'react-native'
import React,{useState,useContext} from 'react'
import style from '../theme/style'
import themeContext from '../theme/themeContex';
import { Colors } from '../theme/color';
import Icon from 'react-native-vector-icons/Ionicons'
import { AppBar,HStack, IconButton  } from '@react-native-material/core';
import Height from './Height';
import {Avatar} from 'react-native-elements';
import { useNavigation } from '@react-navigation/native';
import { color } from 'react-native-elements/dist/helpers';
import BackButton from './Componants/BackButton';
import Header from './Componants/Header';

const width =Dimensions.get('screen').width
const height = Dimensions.get('screen').height
// Regex pattern to determine if a word follows the silent "e" rule
const regex = /(?:[^aeiouy]|y$|a(?!i)|e(?!a)|(ia)|(ei)|(ie)|(eu)|(ui))$/;

const exceptions = [
  "love", "move", "come", "rule", "give", "above", "done", "bone", "some",
  "gate", "whole", "horse", "house", "mouse", "once",
];

export default function RuleExceptions() {
  const theme = useContext(themeContext);
  const navigation = useNavigation();
  const [darkMode, setDarkMode] = useState(false)

  const [clickedWords, setClickedWords] = useState([]);

  const handleClick = (word) => {
    // Check if the word is an exception based on the regex pattern and exception list
    const isException = !regex.test(word) && exceptions.includes(word); // Correct condition
  
    // Update the clickedWords state with the clicked word and its exception status
    if (clickedWords.find(w => w.word === word)) {
      // Remove the word from the list if it's already clicked
      setClickedWords(clickedWords.filter(w => w.word !== word));
    } else {
      // Add the word to the list with its exception status
      setClickedWords([...clickedWords, { word, isException }]);
    }
  };

  const words = [
    'Have', 'Like', 'Love', 'Side', 'Done', 'Mute', 'Come', 'Rule',
    'Gate', 'Above', 'Bake', 'Bike', 'Pole', 'Flute', 'Here', 'Some'
  ];

  console.log("Regex pattern:", regex);
  console.log("Exceptions:", exceptions);
  console.log("Current clickedWords:", clickedWords);

  return (
    <SafeAreaView style={{flex:1, paddingTop:25}}>
      <ImageBackground source={require('../../assets/image/read.png')} style={{flex:1}}>
        <StatusBar backgroundColor="#C2EEFF" translucent={true}/>
        <Header />
         
        <View style={{ paddingHorizontal:20,}}>
          <Text style={{fontFamily:'BADABB', fontSize:21, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>Silent E – Rule Exceptions!</Text>
          <Text style={{fontFamily:'Cheesecake', fontSize:18, color:'#000', textAlign:'center', width:'100%', letterSpacing:1, marginTop:10, lineHeight:20,}}>Highlight the words where Silent E does NOT follow the rule! </Text>
        </View>
        <View style={{paddingHorizontal:20, marginTop:20,}}>
          <View style={{flexDirection:'row', flexWrap:'wrap', width:'100%', borderWidth:2, borderColor:'#0E73BB'}}>
            {words.map((word, index) => (
              <View key={index} style={{ width: '25%', borderWidth: 2, borderColor: '#0E73BB', borderBottomWidth: 2 }}>
                <TouchableOpacity onPress={() => handleClick(word)}>
                  <Text style={{
                    paddingVertical: 5,
                    fontWeight: '600',
                    fontFamily: 'Cheesecake',
                    fontSize: 18,
                    textAlign: 'center',
                    backgroundColor: clickedWords.find(w => w.word === word)?.isException ? 'green' : 'transparent',
                    color: '#1C3014',
                  }}>{word}</Text>
                </TouchableOpacity>
              </View>
            ))}
          </View>
        </View>
        <View style={{marginTop:20,}}>
          <Text style={{fontFamily:'BADABB', fontSize:18, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>REMEMBER: Not all words will follow this rule. </Text>
          <Text style={{fontFamily:'BADABB', fontSize:18, color:'#E51F5C', textAlign:'center', width:'100%', letterSpacing:1, lineHeight:21,}}>When you get to a silent E word, try to sound it out using BOTH vowel sounds to see what would make sense </Text>
        </View>
          
        <BackButton style={{width:'100%',}}/>
      </ImageBackground>
    </SafeAreaView>
  )
}

当前输出 #

Current clickedWords: [{"isException": false, "word": "Have"}, {"isException": false, "word": "Done"}, {"isException": false, "word": "Gate"}, {"isException": false, "word": "Pole"}, {"isException": false, "word": "Flute"}, {"isException": false, "word": "Above"}, {"isException": false, "word": "Mute"}, {"isException": false, "word": "Like"}, {"isException": false, "word": "Love"}, {"isException": false, "word": "Come"}, {"isException": false, "word": "Bake"}, {"isException": false, "word": "Here"}, {"isException": false, "word": "Some"}, {"isException": false, "word": "Bike"}, {"isException": false, "word": "Rule"}, {"isException": false, "word": "Side"}]

Silent E规则说明 #

单词末尾存在不发音的'e'，短元音通常单独出现，长元音则通过添加silent 'e'使单词发音与元音名称一致。

问题根源 #

1. 大小写不匹配：exceptions数组内是小写单词，但words数组内单词首字母大写，导致exceptions.includes(word)始终返回false。
2. 正则逻辑错误：当前正则完全不符合Silent E规则的判断逻辑，无法识别符合规则的单词。

修正方案 #

1. 修复大小写匹配 #

判断时统一转为小写：

const lowerWord = word.toLowerCase();

2. 编写正确的规则判断函数 #

替换原有正则，用更直观的逻辑判断单词是否遵循规则：

const followsSilentERule = (word) => {
  if (word.length < 2) return false;
  const lastChar = word[word.length - 1];
  const secondLastChar = word[word.length - 2];
  // 核心规则：末尾是e，且倒数第二个字符不是元音（a/e/i/o/u）
  return lastChar.toLowerCase() === 'e' && !['a','e','i','o','u'].includes(secondLastChar.toLowerCase());
};

3. 更新handleClick函数 #

调整例外判断逻辑：不遵循规则 或 属于例外列表的单词都标记为例外：

const handleClick = (word) => {
  const lowerWord = word.toLowerCase();
  const isException = !followsSilentERule(lowerWord) || exceptions.includes(lowerWord);

  if (clickedWords.find(w => w.word === word)) {
    setClickedWords(clickedWords.filter(w => w.word !== word));
  } else {
    setClickedWords([...clickedWords, { word, isException }]);
  }
};

完整核心修正代码 #

const exceptions = [
  "love", "move", "come", "rule", "give", "above", "done", "bone", "some",
  "gate", "whole", "horse", "house", "mouse", "once",
];

const followsSilentERule = (word) => {
  if (word.length < 2) return false;
  const lastChar = word[word.length - 1];
  const secondLastChar = word[word.length - 2];
  return lastChar.toLowerCase() === 'e' && !['a','e','i','o','u'].includes(secondLastChar.toLowerCase());
};

export default function RuleExceptions() {
  // ...其他状态与导入代码

  const handleClick = (word) => {
    const lowerWord = word.toLowerCase();
    const isException = !followsSilentERule(lowerWord) || exceptions.includes(lowerWord);

    if (clickedWords.find(w => w.word === word)) {
      setClickedWords(clickedWords.filter(w => w.word !== word));
    } else {
      setClickedWords([...clickedWords, { word, isException }]);
    }
  };

  // ...其余组件代码
}

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