React userEffect axios データ取得後のデータの成形

Question

USerEffetの中でaxiosを使ってデータを取得しました。
valの中身をconsole.logでみてみたところ②のようになっていました。

質問１
取れてきた値で名前（前田、佐藤）を取り出してsetNamesに入れてあげたいのですがどうしたらいいのでしょうか？
checkは初期値がfalseにしたいので前田、佐藤のcheckの値はfalseにします。

質問２
thenを何個も書く時,一つの前のthenで処理した値を使いたい時はどうしたらいいのでしょうか
例えば
.then(result => result.map ((name) => {name.id})

.then(// 上記のmapで処理した配列の値を使いたい)

①
type names {
 name: string
 check: boolean
}

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

 useEffect(() => {
    Axios.get(
    '/users/name',
  )
  .then(val => val)
  .then(// 名前だけを取り出す処理を書きたい)
  .then(//取り出したnamesをsetNamesに入れたい)
  .catch();
});

②
▼{users: {...}}
  ▼names:
    id: "1.0"
     ▼names: Array(2)
       0: "前田"
       1: "佐藤"
       lenght: 2
    　▶︎__proto__: Array(0)
    ▶︎__proto__: Object

Comments

[thyda.eiqau]

言葉で説明いただいている部分と提示されているコードで整合性がない箇所がありますが、状況を正確に伝えていただけますか。
・「checkは初期値が ... ischeckの値は」
・.then(result => result.map ((name) => {name.id}) と .then(val => val) など

②は構造がよくわかりませんので、JSONならJSONのまま提示してください

[aaayyy]

then(result => result.map ((name) => {name.id})は例えばこういうコードが書いてあったらということです

[aaayyy]

構造がわからないというのいはどういうことでしょうか？
サーバから取れる値がconsole.logでみてみたら上記のようになっていたので書いたのですが...

[thyda.eiqau]

インデントがガタガタなので階層関係がよくわからないです。
{users: {names: {id: '1.0', names: ['前田', '佐藤']}}}
ということですか？

[aaayyy]

そうです！！！すいません

Answer 1

質問１

取れてきた値で名前（前田、佐藤）を取り出してsetNamesに入れてあげたいのですがどうしたらいいのでしょうか？
checkは初期値がfalseにしたいので前田、佐藤のcheckの値はfalseにします。

(response_data).users.names.names で　["前田", "佐藤"] にアクセスできるものとして回答します。構造が違う場合は適宜修正してください。

Axios.get('/users/name').then(val => {
  setNames(val.users.names.names.map(name => ({
    name: name,
    check: false
  })));
});

---

質問２

thenを何個も書く時,一つの前のthenで処理した値を使いたい時はどうしたらいいのでしょうか
例えば
.then(result => result.map ((name) => {name.id})

一つ前のthenに渡した関数でreturnしたものが、次のthenの引数として渡ります。

/*
  result = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Charlie'}
  ]; の場合
*/
.then(result => result.map(name => name.id))
.then(ids => { console.log(ids); }) // [1, 2, 3]

Comments

[aaayyy]

一つ前のthenに渡した関数でreturnしたものが、次のthenの引数として渡ります。というのはどういうことでしょうか？あんまり理解ができないです。

[thyda.eiqau]

補足修正しました

[aaayyy]

ありがとうございます！！
userEffectは最初一度だけ呼ばれる処理であっていますか？

[thyda.eiqau]

あなたのいう「ユーザーエフェクト」が、Reactの「ユーズエフェクト」のことであるならば、あっていません。前々回の質問 ( https://teratail.com/questions/239194 ) への回答にも記載しましたが、「副作用フックの利用法 – React」 ( https://ja.reactjs.org/docs/hooks-effect.html ) を確認してください。