React-[串接api篇]-註冊功能發送post ajax call

以下主要以六角學院的React入門工作坊的串接API為主，為了更加熟悉串接流程，仔細把開發流程分析出來，本次串接以axios套件為主並使用async 跟await函式寫法

TodoList 串接API

註冊功能

開發流程：

1.製作版面(三大欄位)：

input:email 要注意的是label[htmlFor]與input[id]的對應

input:password

input:nickname

button:button
登入後，顯示訊息區塊

提醒！input的name屬性和後端傳遞的資料欄位息息相關，在此建議和api提供的欄位同值會比較好

2.稍微了解API註冊功能，伺服器所需要網路請求json檔案中->欄位

3.邏輯流程：

前置作業

• 3-0.註冊功能是post請求(如上圖所知)
• 3-1.先準備好api的主要網址(https://todolist-api.hexschool.io)，以及註冊功能的api("/users/sign_up")

  const base_url = "https://todolist-api.hexschool.io/";
  const signUp_api = `${base_url}/users/sign_up`;
  

input:email欄位

• 3-2.狀態設置：
  • 在這次註冊表單中，有三個欄位必填，input:email & input:password & input:nickname
  • 因此可以將這三個欄位做成一個物件，並統一放在一個狀態state中做管理

    const [signUpData, setSignUpData] = useState({
      email: '',
      password: '',
      nickname: ''
    })
    

• 3-3.設定onChange事件->設計callback fn

  • 當使用者寫入欄位的值，觸發onChange事件並調用callback fn
  • 這個callback fn就是來將使用者寫入在欄位的值存入到useState的狀態中（寫入方法：setSignUpData）
  • 設計這個callback fn

    const handleInputValue = (e) => {
      setSignUpData({
          ...signUpData,//將原始寫入的值帶入
          [e.target.name]: e.target.value //更新
      })
    }
    

• 3-4.設定input[value]屬性：將使用者寫入input的值並利用useState的寫入方法寫入到各欄位狀態中，再將該狀態寫回到input[value]屬性值裡
  

點擊送出註冊資料

• 3-5.使用者點擊送出註冊按鈕後

  • 在button上，設置onClick事件調用handleSignUpClick callback fn

• 3-6.設計handleSignUp 函式流程（先試看看是否註冊成功並回傳資料）：
  
  隨便在欄位上輸入虛假的使用者帳號 密碼 與 暱稱 伺服器回傳成功的回覆:重要的是裡面的data物件內容
  

得到伺服器回傳的註冊狀態回覆

• 3-7.將handleSignUp async函式寫的更完整一點
  • 狀態設置：點擊註冊後，顯示提示訊息，需要有一個狀態const [mesg, setMsg] = useState('')
  • 再將這個setMsg方法寫入在上面使用者點擊按鈕後，將註冊內容送出後，我想顯示伺服器回傳資料的相關訊息提供給使用者，好明白當前狀態是註冊成功還是失敗
  • 不論是成功或失敗的回傳資料，都要清空介面的欄位
  • 
  • 成功回傳的介面訊息
    • 
  • 失敗回傳的介面訊息
    • 

註冊功能串接api完成！！