Как пройти через ответ Axios

Question

У меня есть вызов API и я установил ответ в состоянии, как

componentDidMount(){
    var a=this;
    axios.post("http://localhost/axios/index.php")
    .then((res)=>{
          console.log(res.data);
          a.setState(
            { datas:res.data },
            () => console.log(this.state.datas)
          );
    });
}

Я получаю

{0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…}}
0: {id: "1", typee: "class", user_id: "1"}
1: {id: "2", typee: "class", user_id: "1"}
2: {id: "3", typee: "course", user_id: "1"}
3: {id: "4", typee: "class", user_id: "2"}
4: {id: "5", typee: "test_series", user_id: "3"}
5: {id: "6", typee: "test_series", user_id: "2"}

в состоянии.Я хочу показать эти данные в табличном формате, поэтому попробовал

render(){
return(
  <table>
    <thead>
      <tr>
        <th>S.No.</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      {
        this.state.datas.map(data=>(
          <tr key={data.id}>
            <td>{data.id}</td>
            <td>{data.typee}</td>
          </tr>
        ))
      }
    </tbody>
  </table>
)
}

, но это дает мне this.state.datas.map is not a function Я инициализировал свое состояние данных как нулевой массив

Answer 1

Это потому, что res.data является объектом, а не массивом.Я полагаю, вы могли бы преобразовать его в массив объектов, прежде чем назначить его на state.

. Просто используйте метод Object.values(), доступный в ES6, который создаст массив, используя все значения пар ключ-значение.в объекте.

componentDidMount(){
    var a=this;
    axios.post("http://localhost/axios/index.php")
    .then((res)=>{
          a.setState(
            { datas: Object.values(res.data) },
            () => console.log(this.state.datas)
          );
    });
}