版本一

const register = async () => {};

const Card = ({ children, onRegister }) => {
  const [message, setMessage] = useState();
  return (
    <div>
      <div>卡片標題</div>
      {children}
      <button
        onClick={() =>
          onRegister()
            .then(({ data, error }) => {
              if (error) {
                setMessage(`註冊失敗: ${error.message}`);
              } else {
                setMessage("註冊成功");
              }
            })
            .finally(() => {
              setTimeout(() => setMessage(null), 3000);
            })
        }
      >
        註冊
      </button>
      {message && <div className="message">{message}</div>}
    </div>
  );
};

const Page = () => {
  const handleRegister = async () => {
    return register()
      .then((data) => {
        return { data, error: null };
      })
      .catch((err) => {
        return { data: null, error };
      });
  };
  return (
    <div>
      <Card onRegister={handleRegister}>卡片內容</Card>
    </div>
  );
};

版本一的 <Card> props 收到的是一個Promise function handleRegister，我們在Page層級 (在這裡處理商業邏輯) 定義了 register() 的成功 .then((data) => ({ data, error: null }) 跟 失敗的模式 .catch((err) => ({ data: null, err })的資料格式。

這份 code 已經是略過前一步的設想了，我們在這裡的 Promise function 是否要加入 .catch(failure callback) ？意即這個 .catch(failure callback) 要寫在 Page or Card 層？

.catch(failure callback) 若是寫在 Card 層， 我們底下所在的 Card 調用 onRegister 時，必須定義、處理商業邏輯層的錯誤。

.catch(failure callback) 若是寫在 Page 層， 我們底下所在的 Card 調用 onRegister 時，將無法捕捉到任何一個錯誤 ( catch 收不到任何東西 )。

Card 也就是我們專注在樣式的 UI，但我們又希望能根據 商業邏輯 的 成功 or 失敗，做些對應的 UI 互動。

因此，我們才會在Page層級定義 register() 的成功 .then((data) => ({ data, error: null }) 跟 失敗的模式 .catch((err) => ({ data: null, err })的資料格式。讓底下的元件能根據定義好的資料格式，去做成功跟失敗的處理！