如何在React中將JSON陣列設定為狀態？-有解無憂

我有以下 App.js 代碼：

import React, { Component } from 'react';
import axios from 'axios'


class Axios extends Component {

    constructor() {
        super();
        this.state = {
            item : '',
        }
    }

    componentDidMount() {
        axios.get('https://restcountries.com/v3.1/capital/lima')
        .then( response => {
            const data = response.data.map(( data )=>{
                this.setState({
                    item : data
                });
            });
        })
        .catch( error => {
            alert( error );
        });
    }

    prepare() {
        console.log( this.state.item );
    }

    render() {
        return (
            <div>{this.prepare()}</div>
        )
    }
}

export default Axios;

我的目標是從此 API 中獲取通用名稱：https://restcountries.com/v3.1/capital/lima

現在在componentDidMount()方法上，我需要將 API 回傳資料設定為item狀態，以便我可以回圈使用該prepare方法。

但是我不知道如何將 API 回傳陣列 JSON 資料設定為item狀態？

uj5u.com熱心網友回復：

將您更新state.item為空白陣列。

constructor() {
    super();
    this.state = {
        item : [],
    }
}

在中componentDidMount()，更新代碼以接受response：

 componentDidMount() {
    axios.get('https://restcountries.com/v3.1/capital/lima')
    .then( response => {
        this.setState({
                item : response.data
            });
    })
    .catch( error => {
        alert( error );
    });
}

在中render()，您可以使用 map onstate.item并且可以在其上回圈。

render() {
    return (
        <div>{this.state.item.map(data,index)=>(
              //some UI mapping to each `data` in `item` array
        )}</div>
    )
}

uj5u.com熱心網友回復：

你只需要做assingresponse.data到item如下：

現場演示

如何在 React 中將 JSON 陣列設定為狀態？

componentDidMount() {
  axios
    .get("https://restcountries.com/v3.1/capital/lima")
    .then((response) => {
        this.setState({
          item: response.data
        })
      })
    .catch((error) => {
      alert(error);
    });
}

uj5u.com熱心網友回復：

你應該檢查一下。

import React, { Component } from "react";
import axios from "axios";

class Axios extends Component {
  constructor() {
    super();
    this.state = {
      item: []
    };
  }

  componentDidMount() {
    axios
      .get("https://restcountries.com/v3.1/capital/lima")
      .then((response) => {
        this.setState({
          item: response && response.data
        });
      })
      .catch((error) => {
        alert(error);
      });
  }
  
  prepare() {
    return <div>{console.log("Item", this.state.item)}</div>;
  }

  render() {
    return <div>{this.prepare()}</div>;
  }
}

export default Axios;

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/355692.html

標籤：javascript 反应

上一篇：使用主執行緒在QThread中創建的失敗連接物件和一個QThread中的失敗連接甜菜物件

下一篇：在vueapexcharts中加載axios資料