React Native自定义Tile组件onPress不触发、状态不更新及更新深度超限问题

问题1：点击Tile组件无响应、仅初始化触发一次函数 #

错误原因 #

你在Tile.js的TouchableOpacity组件中，给onPress属性赋值的是props.onPress()，相当于组件渲染时立即执行了传入的onPress函数，而非将函数作为点击事件的回调绑定。组件初始化渲染时执行一次后，后续点击自然没有可触发的回调函数。

修复方案 #

修改Tile.js中TouchableOpacity的onPress属性，直接传入函数本身即可：

const Tile = (props) => {
    return (
        // 去掉props.onPress后面的括号
        <TouchableOpacity onPress={props.onPress}> 
            <View>
                <Text style={styles.mainChar}>{props.firstChar}</Text>
                {props.secondChar ? <Text style={styles.secondChar}>{props.secondChar}</Text> : null}
            </View>
        </TouchableOpacity>
    )
}

问题2：号码追加逻辑错误、Maximum update depth exceeded报错 #

错误原因 #

1. 死循环报错的根源还是上面的Tile组件中onPress直接调用函数的问题：组件渲染→执行onPress→修改number状态→触发重渲染→再次执行onPress，形成无限循环，触发更新深度超限。
2. 号码被覆盖的问题是因为你直接调用setNumber(newChar)替换了原有值，另外如果直接写setNumber(getNumber + newChar)，在异步更新场景下可能会读取到旧的state值，而且初始state没有赋值为空字符串，首次拼接会出现undefined1的异常结果。

修复方案 #

1. 先给useState设置初始值为空字符串
2. 使用状态更新的函数式写法，直接读取上一轮的最新状态值进行拼接：

// 初始值设为空字符串
const [getNumber, setNumber] = useState('');

const handleNumber = (newChar) => {
  console.log(newChar);
  // 函数式更新，prev参数是上一轮的最新state值
  setNumber(prev => prev + newChar);
}

修复完以上两处问题后，连续点击按键'1'就会正常拼接出'111'的号码字符串。

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