时间戳

首页 > 解决方案 > 如何将axios响应保存到变量并更新react js中的状态？

reactjs - 如何将axios响应保存到变量并更新react js中的状态？

问题描述

数据插入选择.jsx

import React from 'react'
import axios from 'axios'
import Data from './Data'

class DataInsertSelect extends React.Component {
    constructor() {
        super();
        this.state = {
            datam: ""
        };
    }

    componentDidMount() {
        const axios = require('axios');
        // Make a request for a user with a given ID
        axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
        .then( function (response) {
            // handle success
            console.log(response);
        })
        .catch(function (error) {
            // handle error
            console.log(error);
        })
        .then(function () {
            // always executed
        });
    }

    render() {
        return (
            <div className="container">
                <div class="row">
                    <div className="col-sm-6 offset-sm-5">
                        {this.state.datam.map(joke=> (
                            <Data key={joke.id} title={joke.title} />
                        ))}
                    </div>
                </div>
                <div className="col-sm-10 offset-sm-2"><br/>
                    <form class="form-inline" action=" " method="post" >
                        <div class="form-group">
                            <label for="email">FIRSTNAME:</label>
                            <input type="text" name="data1"
                                   class="form-control" id="email" />
                        </div>
                        <div class="form-group">
                            <label for="pwd">LASTNAME:</label>
                            <input type="text" name="data2"
                                   class="form-control" id="pwd" />
                        </div>
                        <button type="submit" class="btn btn-danger">Submit</button>
                    </form>
                </div>
            </div>
        );
    }
}

export default DataInsertSelect;

数据.jsx

import React from 'react'

class Data extends React.Component {
    render() {
        return (
            <h3>{this.props.title}</h3>
        );
    }
}

export default Data;

使用console.log(response);输出 5 行数据，但我想将 axios 响应存储到一个变量并更新状态，它需要显示在应用程序中。

这里我也面临错误：

TypeError：this.state.datam.map 不是函数。

我尝试了很多但无法修复它。我是 React 和 axios 的绝对初学者。

我希望这很清楚。提前致谢。

标签： reactjsaxios

解决方案

这个例子可以帮助你

import React, { Component } from 'react'
import Axios from 'axios';
export default class example extends Component {
constructor(props) {
    super(props)

    this.state = {
        users :[]        
    }
}
 componentDidMount(){
     Axios.get('http://127.0.0.1:8000/users/')
.then(function (response) {
  this.setState({
    users: response.data,
});
})
.catch(function (error) {
  console.log(error);
})
 };

    render() {
        return (
            {
                 { users.lenght >0 ? (
           
            <tbody>
                 <tr>
                   <td>{this.state.id}</td>
                   <td>{this.state.username}</td>
                   <td>{this.state.email}</td>
                 </tr>
            </tbody>

       ):(
         <h1>No data available!</h1>
       )
         
      }
            }
        )
    }
}

推荐阅读