reactjs - 仅在点击屏幕时检测到状态更改

Question

我有一些 TouchOpacity 组件，它们在按下时会触发一个功能。该函数检索数据然后设置状态。

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

  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 setDerivedData({
        chartTimeSpan: timeSpan,
        sales,
        totalSales,
        orders: orderQty,
        logins: loginCount,
      });
      await 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;
  console.log(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>
    </>
  );
};

一切正常。当我单击按钮时也会获取数据。但是，获取数据后状态不会更新。我知道这一点是因为 return 语句上方的 console.log(衍生数据); 没有运行。当我点击屏幕上的任意位置时，console.log(衍生数据); 会给出预期的输出。请注意，我没有设置任何在触摸屏幕时检测此事件的函数。

I have used the derivedData in some other components but did not include those for simplicity sake.

Answer 1

当组件需要重新渲染时，console.log(衍生数据) 将运行。这取决于注入(inject)的状态和 props 变量。由于 JSX 中不使用状态变量，因此无需重新渲染组件并记录新的 衍生数据。

您可以通过使用 import { useEffect } from 'react' 来绕过此问题。尝试使用以下方式记录派生数据:

useEffect(() => {
  console.log(derivedData);
});