使用鈎子做出反應時沒有得到更新的 state 值？

Question

我正在使用functional components 。我有2單選按鈕和一個submit按鈕。在提交按鈕上我無法獲得updated value 。

這是我的代碼https://codesandbox.io/s/peaceful-microservice-ywdoe?file=/src/App.js

重現步驟

1. 運行應用程序。默認單選按鈕值為no
2. 將任何單選按鈕更改為yes 。然后單擊提交按鈕。它應該顯示 state 的更新值。 但它顯示初始 state 為什么？

按鈕提交處理程序

 const buttonHandler = useCallback(async e => {
    e.preventDefault();
    console.log(state);
  }, []);

如果blank array to one item in array state like this它可以正常工作，但是當我更改state時它會重新渲染按鈕組件。 任何更好的解決方案？？？ 防止重新渲染並更新 state？

 const buttonHandler = useCallback(async e => {
    e.preventDefault();
    console.log(state);
  }, [state]);

Answer 1

將state添加到buttonHandler useCallback 依賴數組。

const buttonHandler = useCallback(async e => {
  e.preventDefault();
  console.log(state);
}, [state]);

或者，不要記住buttonHandler回調。

const buttonHandler = e => {
  e.preventDefault();
  console.log(state);
};