React hooks axiosを使ったpostのやり方

Question

inputformで入力した値をButtonを押下した時にサーバーにデータを送りたいです。
inputfromで入力した値(name)がButtonを押されるとsetNamesで値が入るのですが、
namesには佐藤、山田が元から入っています。
Axios.postする時に入力した名前だけを登録したい場合はどうしたらいいのでしょうか？

namesの中身 [佐藤、山田]

type names {
 name: string
 check: boolean
}

const [names, setNames] =  useState<names[]>([]) 

useEffect(() => {
  const fetchData = async () => {
    const result = await Axios.post(
      '/users/name',
    )
}, [])

Comments

[thyda.eiqau]

サーバーはどういう形でデータを受け取るのですか？formdataなのかJSONなのか、等
あと、Buttonを押したときなのに、Buttonのclickイベントハンドラじゃないのは何か理由があるのですか？

[aaayyy]

jsonです。
Buttonを押したときなのに、Buttonのclickイベントハンドラじゃないのは何か理由があるのですか？←これはどうゆうことでしょうか？
Buttonを押した時にuseEffectを行いたいです

[thyda.eiqau]

Buttonを押したときにやりたい処理は、「Buttonが押されたとき」のイベントハンドラに実装するのが自然です。
あと、render部分もご提示ください

Answer 1

質問は出来るだけ問題がはっきりしている方が解答しやすいです。
とは言え最初は問題を切り分けることも難しいということもあるかと思います。
そういった場合は可能な限りソースコードは全文を貼り、エラーメッセージ等も出ているのであれば全て貼るようにしましょう。
以下、修正が必要そうな箇所を順番に記載しました。

useEffect について

まず、useEffect を勘違いされているかと思うので、そちらから説明させていただきます。
useEffect はレンダリングの際に第二引数に指定されている値に更新があったときだけ実行される関数です。今回は第二引数のリストが空なので、初回レンダリングの時のみ実行されるというプログラムになっています。

したがって、ボタンを押したときに実行されるという仕様とは合っていないかと思います。

input フォームで入力した値の管理について

inputfromで入力した値(name)がButtonを押されるとsetNamesで値が入る

とのことですが、React では inputform の更新も状態で管理するのが一般的かと思います。
したがって、もう1つ状態管理変数を用意して、以下のように記載するといいかと思います。

const [name, setName] = useState<string>('')

return (
  <>
    <input value={name} onChange={(e) => setName(e.value.target)} />
  </>
)

ボタンを押したときの処理は name の値を names に加えて、さらに axios でポストすることになります。

axios.post について

axios.post は第一引数が url 、第二引数がポストする値です。
先ほどの inputform の管理と合わせて以下のように記載するのがいいかと思います。

const [names, setNames] = useState<names[]>([])
const [name, setName] = useState<string>('')

const onClicke = () => {
  // データを json 形式に整形
  const data = {
    name: name,
    check: // true か false？
  } as names

  // names に値の追加
  const nameList = names.concat([data])
  setNames(nameList)

  // axios でポスト
  axios.post('/users/name', data)
}

return (
  <>
    <input value={name} onChange={(e) => setName(e.value.target)} />
    <button onClick={onClick} />
  </>
)

その他気になったこと

names 型が定義されていますが、names の変数と被っていてとてもややこしいです。
型名は最初を大文字にするのが一般的かと思います。
また、リストにして初めて複数だと思うので、複数形の s は不要かと思います。