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（derivedData）; 无法运行。当我点击屏幕上的任意位置时， console.log（derivedData）; 会给出预期的输出。请注意，我没有设置任何在触摸屏幕时检测到此事件的功能。

我在其他一些组件中使用了衍生数据，但为简单起见，未包括这些组件。

Answer 1

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

您可以使用import { useEffect } from 'react'来绕过它。尝试使用以下命令记录派生数据：

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

Answer 2

此问题是由于我在App.js文件中包含以下代码行引起的。

XMLHttpRequest = GLOBAL.originalXMLHttpRequest
  ? GLOBAL.originalXMLHttpRequest
  : GLOBAL.XMLHttpRequest;

// fetch logger
global._fetch = fetch;
global.fetch = (uri, options, ...args) => (global._fetch(uri, options, ...args)
  .then((response) => {
    console.log('Fetch', { request: { uri, options, ...args }, response });
    return response;
  }));

上面的代码允许检测网络请求。我不知道为什么，但是，尽管上面的代码显示了网络请求，但除非点击屏幕，否则它还会延迟从请求传递到组件的数据。

注释生产中的上述几行，可使代码按预期工作。

仅在轻按屏幕时才能检测到状态更改

2 个答案: