ReactでAPIの情報をJsonで受け取って表示したいです

Question

前提・実現したいこと

ReactでAPIの情報をJsonで受け取り、mapで配列で表示したいです

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

Uncaught TypeError: this.state.rooms.map is not a function

該当のソースコード

import axios from "axios"
import React from 'react';
import ReactDOM from 'react-dom';

export default class Room extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      rooms: [],
    };
  }
  componentDidMount() {
    const url = "http://localhost:3000";
    axios.get(url).then((res) => {
      console.log(res.data);
      this.setState({ rooms: res.data });
    });
  }

  render() {
    return (
      <div>
        {this.state.rooms.map((room) => (
          <Room
            key={room.id}
            name={room.name}
            isPass={room.isPass}
            username={room.createUserID}
          />
        ))}
      </div>
    )
  }
}
ReactDOM.render(
  <Room />, // TypeScript React
  document.getElementById('root')
);

Comments

[jun68ykt]

axios で API にリクエストした結果、成功時の処理の中で、console.log(res.data);　が出力しているデバッグログを追記いただけると、原因が分かるかもしれません。

[masa112m]

render()の中のthis.state.roomsと
constructor()の中のroomsは別のものということですか？

[markey]

同じですが、error文からおそらくaxiosのレスポンス(res.data)が配列になっていないと思われるので、console.logの結果を貼ってもらえるとよろしいかと思います。

[masa112m]

理解しました。ありがとうございます。

Answer 1

レスポンスのデータが配列になっていなかった