如何使用React Native统计字符串中的元音、辅音及总字符数量

原代码核心错误点 #

• setState 回调写法错误：你在第一个setState后使用了逗号而非把回调作为第二个参数传入，导致整个统计逻辑的回调函数完全没有执行，这是结果不更新的核心原因
• 统计前未重置计数：多次点击分析按钮时，辅音、元音、字符数会在上次结果基础上累加，数据错误
• 双循环逻辑错误：每个字符会遍历全部10个元音字符做判断，每一次判断都会触发一次计数，一个字符最多会被统计10次，计数结果完全不符合预期
• 异步setState滥用：循环内多次调用setState依赖旧state值，会出现过时状态问题，计数不准

修复后完整代码 #

export default class App extends Component{
  constructor(){
    super();
    this.state ={
      value: '',
      consonant: 0,
      vowels: 0,
      characters:0,
    }
  }

  WordAnalyzer = () => {
    // 先重置所有计数变量
    let vowelsCount = 0
    let consonantCount = 0
    const str = this.state.value.trim()
    const charactersCount = str.length
    const listVowel = ['a','i','u','e','o','A','I','U','E','O'];
    // 遍历字符统计
    for (let char of str) {
      if (listVowel.includes(char)) {
        vowelsCount++
      } else {
        consonantCount++
      }
    }
    // 一次性更新所有state，避免异步问题
    this.setState({
      vowels: vowelsCount,
      consonant: consonantCount,
      characters: charactersCount
    })
  }

  render(){
    return(
      <View style={styles.container}>
        <Text style={styles.header}>单词分析工具</Text>
        <TextInput style= {styles.input} onChangeText={(value) =>this.setState({value})} placeholder='请在这里输入单词' />
        <Button color = '#841584' onPress={this.WordAnalyzer} title='开始分析'/>
        <Text>输入单词        :   {this.state.value}</Text>
        <Text>辅音数量        :   {this.state.consonant}</Text>
        <Text>元音数量        :   {this.state.vowels}</Text>
        <Text>总字符数        :   {this.state.characters}</Text>
      </View>     
    );
  }
}

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