關於在 React 上使用鈎子排隊狀態更改的問題

Question

所以，我開始通過做類組件來學習 React。 在那里，據我所知，我在做什么，如果我有一個

this.state = {
  isLoading: false,
  dataToRender: [],
}

this.setState({ isLoading: true }, async () => {
 const data = await fetchData();
 this.setState({ dataToRender: data , isLoading: false });
})

const message => <p>loading...</p>

if (isLoading) return message();

return (
 dataToRender.map
)

為了在我為新數據調用 API 時顯示“正在加載”消息，我可以知道 setState“隊列”將按順序執行。 外部 setState 將接收第一個參數的第一個狀態更改和一個在其后作為第二個參數立即執行的函數。

問題是我在用鈎子實現這一點的方法上有點困難。 我假設做

const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState([]);

setLoading(async () => {
  setLoading(true)
  const data = await fetchData()
  setData(data);
  return false;
})

行不通，對吧？ 我覺得以某種方式使用鈎子時，構建這種組件邏輯的整體邏輯可能會有所不同……如果有人至少能指出我的概念方向，那就太好了。 謝謝！ :)

Answer 1

useState的 dispatch 函數沒有回調。

  const fn = async () => {
    setIsLoading(true)
    const data = await fetchData()
    setData(data)
    setIsLoading(false)
  })

上述函數通常在onClick或useEffect等事件上調用。

Answer 2

作為useState狀態更新函數傳遞的函數被視為同步函數，因此您可以有效地將隱式返回的 Promise 對象保存到狀態中。

您應該做的是將異步邏輯分解為從事件處理程序調用的函數（如onClick ）或在組件生命周期中調用的函數（如useEffect 。

const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState([]);

const asyncCall = async () => {
  setLoading(true);
  try {
    const data = await fetchData();
    setData(data);
  } catch(error) {
    // handle any errors, logging, etc...
  } finally {
    setLoading(false);
  }
};

這將按照入隊的順序調用/入隊每個狀態更新。 您還應該在try/catch塊中包含任何異步邏輯，以便您可以處理任何被拒絕的承諾，在finally清除加載狀態，以便無論已解決/拒絕的承諾如何，當代碼完成時，它都會重置加載狀態。

Answer 3

取決於 Kent React 通常對這些調用進行批處理，因此您只能獲得一次重新渲染，但它無法在異步回調中執行此操作（例如我們的 promise 成功和錯誤處理程序）。 您可以使用對象作為 useState 的值或使用 useReducer。

const [state,setState]=useState({isLoading:false,success:false,isError:false,data:[]})

然后在每個狀態上設置這些屬性。