React Native使用useState更新状态后读取仍为旧值问题求助

问题根因 #

• 输入正确数值后result仍为false是类型不匹配+React状态异步更新共同导致：TextInput的onChangeText回调返回的值是字符串类型，你用严格相等运算符===对比数字类型的number永远返回false；同时setResult是异步批量更新逻辑，调用后立即打印result拿到的是本次渲染闭包里的旧值，不是更新后的值。
• 点击生成按钮控制台打印旧值/undefined是React状态更新的异步特性导致：setNumber调用后不会立刻修改当前作用域下的number变量，而是会把更新请求加入队列，等当前函数执行完毕后才触发重渲染，新的number值会在下一次渲染时才生成，因此同步打印永远拿到更新前的旧值。

修复方案 #

import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

const App = () => {
  const [number, setNumber] = useState(0);
  const [result, setResult] = useState(false);

  const styles = StyleSheet.create({
    // 原有样式代码保持不变
  });

  const guess = (num) => {
    // 输入值转数字后再做相等判断
    const guessNum = Number(num);
    const newResult = guessNum === number;
    setResult(newResult);
    // 直接打印新计算的结果，不要读取旧state
    console.log(newResult);
  };

  const genNumber = () => {
    // 先生成随机数存为变量，同时更新state和打印
    const randomNum = Math.floor(Math.random() * 99 + 1);
    setNumber(randomNum);
    console.log(randomNum);
  };

  // 如需监听状态变化执行其他逻辑，可使用useEffect
  useEffect(() => {
    console.log('最新生成的数值为:', number);
  }, [number]);

  return (
    <View style={styles.view}>
      <Button onPress={genNumber} title="Generate Number" />
      <TextInput
        style={styles.text}
        onChangeText={guess}
        placeholder="Enter your guess"
        // 限制输入键盘为数字键盘，优化使用体验
        keyboardType="numeric"
      />
      <Text style={styles.text}>{number}</Text>
      {/* 新增结果提示验证逻辑是否生效 */}
      {result && <Text style={styles.text}>猜对了！</Text>}
    </View>
  );
};

export default App;

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