React Native点击按钮加值到数组出现Invalid hook call错误如何解决

核心报错原因 #

你违反了React Hook的调用规则：

• React Hook（比如代码里用到的useState）只能在两个场景下调用：
  1. React函数组件的顶层作用域（不能在条件判断、循环、回调函数内部调用）
  2. 自定义Hook（名称必须以use开头的函数）的顶层作用域

你的代码里AddtoArray是普通函数，既不是React函数组件也不是符合命名规范的自定义Hook，而且你是在点击事件的回调执行过程中调用AddtoArray，在它内部执行useState的时候就直接触发了invalid hook call报错，这也是控制台仅输出了a a就中断的原因——后续useState执行失败抛出错误，代码没有继续向下执行。

逻辑冗余问题 #

你本身已经在RouletteExercice1组件内声明了multiplyArray状态和对应的更新方法setMultiplyArray，完全不需要额外在AddtoArray里再声明新的状态，这个AddtoArray函数属于多余设计。

修正方案 #

直接删除AddtoArray函数，给每个Pressable的onPress直接写更新逻辑即可，推荐使用函数式更新避免闭包陷阱：

import React, { useState } from "react";
import { StyleSheet, Text, View, Pressable, TextInput } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

function RouletteExercice1 ({ navigation }){
  const [multiplyArray, setMultiplyArray] = useState([]);
  // 抽离公共更新逻辑，不要在普通函数内调用Hook
  const addValue = (val) => {
    setMultiplyArray(prevArr => [...prevArr, val])
  }

  return(
    <View>
          <Pressable onPress={() => addValue('35')}>
            <Text>35</Text>
          </Pressable>
          <Pressable onPress={() => addValue('17')}>
            <Text>17</Text>
          </Pressable>
          <Pressable onPress={() => addValue('11')}>
            <Text>11</Text>
          </Pressable>
          <Pressable onPress={() => addValue('8')}>
            <Text>8</Text>
          </Pressable>
          <Pressable onPress={() => addValue('5')}>
            <Text>5</Text>
          </Pressable>
    </View>
  )
}

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