React中TouchOpacity触发后状态未即时更新，需点击屏幕生效

看起来你遇到了React Native中状态更新后组件未即时重渲染的问题，我来帮你拆解原因并给出具体的修复方案：

核心问题原因 #

1. 错误使用await处理setState：React的useState返回的状态更新函数不返回Promise，所以你代码里的await setDerivedData()和await setTimeSpan()完全无效，不仅不会等待状态更新完成，还可能打乱代码执行逻辑。
2. 组件渲染日志的局限性：你在组件顶部写的console.log(derivedData)只会在组件触发重渲染时执行，如果状态更新后组件没及时渲染，这条日志就不会输出。而点击屏幕其他地方时触发的UI刷新，间接让组件完成了重渲染，所以你才看到了预期的日志。

解决方案1：修正setState用法并使用useEffect追踪状态变化 #

首先移除无效的await，然后用useEffect监听状态变化，这样能准确追踪状态更新时机，无需依赖组件渲染时的日志：

const Summary = () => { 
  const [timeSpan, setTimeSpan] = useState('Day'); 
  const [derivedData, setDerivedData] = useState({ 
    chartTimeSpan: 'Day', 
    sales: [], 
    totalSales: 0, 
    orders: 0, 
    logins: 0, 
  }); 

  // 用useEffect监听derivedData变化，状态更新时立即输出日志
  useEffect(() => {
    console.log('derivedData updated:', derivedData);
  }, [derivedData]);

  const _fetchSummary = async (timeSpan) => { 
    console.log(`_fetchSummary HIT : ${timeSpan}`); 
    try { 
      const res = await axios.get(`/summary/${timeSpan.toLowerCase()}`); 
      const { loginCount, orderQty, sales, totalSales } = res.data; 
      // 移除await，setState不返回Promise
      setDerivedData({ 
        chartTimeSpan: timeSpan, 
        sales, 
        totalSales, 
        orders: orderQty, 
        logins: loginCount, 
      }); 
      setTimeSpan(timeSpan); 
      console.log(timeSpan, loginCount, orderQty, sales, totalSales); 
    } catch (err) { 
      console.log(err); 
    } 
  }; 

  const _switchTimeSpan = (newTimeSpan) => { 
    console.log(`TimeSpan : ${timeSpan}`); 
    console.log(`NewTimeSpan : ${newTimeSpan}`); 
    if (timeSpan !== newTimeSpan) { 
      _fetchSummary(newTimeSpan); 
    } 
  }; 

  const { chartTimeSpan, sales, totalSales, orders, logins } = derivedData; 

  return ( 
    <> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Day')}> 
        <Text style={dropDownItemStyle}>Day</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Week')}> 
        <Text style={dropDownItemStyle}>Week</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Month')}> 
        <Text style={dropDownItemStyle}>Month</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Year')}> 
        <Text style={dropDownItemStyle}>Year</Text> 
      </TouchableOpacity> 
    </> 
  ); 
};

解决方案2：合并状态减少更新次数 #

你可以把timeSpan和derivedData合并成一个状态对象，这样只需要一次setState调用，既减少状态更新次数，也能避免两个状态不同步的问题：

const Summary = () => { 
  const [summaryState, setSummaryState] = useState({ 
    timeSpan: 'Day',
    chartTimeSpan: 'Day', 
    sales: [], 
    totalSales: 0, 
    orders: 0, 
    logins: 0, 
  }); 

  useEffect(() => {
    console.log('summaryState updated:', summaryState);
  }, [summaryState]);

  const _fetchSummary = async (timeSpan) => { 
    console.log(`_fetchSummary HIT : ${timeSpan}`); 
    try { 
      const res = await axios.get(`/summary/${timeSpan.toLowerCase()}`); 
      const { loginCount, orderQty, sales, totalSales } = res.data; 
      // 使用函数式更新确保获取最新状态
      setSummaryState(prevState => ({
        ...prevState,
        timeSpan,
        chartTimeSpan: timeSpan, 
        sales, 
        totalSales, 
        orders: orderQty, 
        logins: loginCount, 
      })); 
      console.log(timeSpan, loginCount, orderQty, sales, totalSales); 
    } catch (err) { 
      console.log(err); 
    } 
  }; 

  const _switchTimeSpan = (newTimeSpan) => { 
    console.log(`TimeSpan : ${summaryState.timeSpan}`); 
    console.log(`NewTimeSpan : ${newTimeSpan}`); 
    if (summaryState.timeSpan !== newTimeSpan) { 
      _fetchSummary(newTimeSpan); 
    } 
  }; 

  const { chartTimeSpan, sales, totalSales, orders, logins } = summaryState; 

  return ( 
    <> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Day')}> 
        <Text style={dropDownItemStyle}>Day</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Week')}> 
        <Text style={dropDownItemStyle}>Week</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Month')}> 
        <Text style={dropDownItemStyle}>Month</Text> 
      </TouchableOpacity> 
      <TouchableOpacity onPress={() => _switchTimeSpan('Year')}> 
        <Text style={dropDownItemStyle}>Year</Text> 
      </TouchableOpacity> 
    </> 
  ); 
};

额外排查点 #

如果上述修改后仍未解决问题，可以检查：

• 确认axios请求返回的数据格式正确，setState确实接收到了有效值；
• 检查Summary组件是否被React.memo包裹，若有则确保传递的props有正确变化（不过你的组件依赖自身state，这个可能性较低）；
• 临时测试：添加一个强制重渲染的状态，比如const [forceUpdate, setForceUpdate] = useState(0)，在setDerivedData后调用setForceUpdate(prev => prev + 1)，验证是否能触发即时渲染。

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