React.js map関数の処理中の値のみを取得する方法

Question

前提・実現したいこと

初めての質問で情報の不足や言葉足らずな点も多いかと思います、何卒ご教示お願いします。

reactにて配列をmap関数を使い一覧表示しております。
map関数の処理の中で要素の一部を取り出しメソッドの引数として扱いたいです。

発生している問題・エラーメッセージ

取り出した値が該当処理の値だけでなく、一覧表示している全ての処理の値となってしまっております。

該当のソースコード

getProjectName(id){
    const projectData = this.state.userProjects.find((obj)=>obj.id === id);
    console.log(projectData);
  }

render() {
const waitCard = this.state.waitTask.map((obj,index)=>
    <div key={index} >
      <div>{obj.name}</div>
      <div>{this.getProjectName(obj.project_id)}</div>
    </div>)

試したこと

イベントハンドラの引数に同じ値を設定した際は、該当処理の値だけが取得できておりました。

getProjectName(id){
    const projectData = this.state.userProjects.find((obj)=>obj.id === id);
    console.log(projectData);
  }

render() {
const waitCard = this.state.waitTask.map((obj,index)=>
    <div key={index} onClick={() =>{this.handleClickOpen(obj.project_id)}}>
      <div>{obj.name}</div>
      <div>{this.getProjectName(obj.project_id)}</div>
    </div>)

補足情報（FW/ツールのバージョンなど）

react: 17.0.2
react-dom: 17.0.2

Comments

[hoshi-takanori]

getProjectName は何も return してないので、this.getProjectName(obj.project_id) のところは何も表示されないのでは。あと、waitTask の中身はどうなってますか？ ひとつのプロジェクトにつき複数のタスクがある感じでしょうか？

Answer 1

取り出した値が該当処理の値だけでなく、一覧表示している全ての処理の値となってしまっております。

mapは全要素回るので、getProjectNameも各要素ごとに1回ずつ呼ばれてしかるべきかと思いますが、そういうことではないのでしょうか？

Comments

[Akagaki]

ご回答ありがとうございます。
説明不足で申し訳ございません。
要素が４つ入っている配列を`map`で回した際、`getProjectName`は、４つの値を取得して３回呼ばれております。
各要素ごと１回ずつ、要素の値だけを取得したいです。

[maisumakun]

> ４つの値を取得して３回呼ばれております。

renderが複数回行われただけ、ということはありませんか？

[Akagaki]

APIを３回取得する箇所があり、そこで３回レンダリングされており値は１回ずつ取得できていたようです。
ご回答ありがとうございました。