Question

DataInsertSelect.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;

Data.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的绝对入门者。

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

Answer 1

此示例可以为您提供帮助

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>
       )
         
      }
            }
        )
    }
}

Answer 2

出现错误：TypeError: this.state.datam.map is not a function，因为this.state.datam是一个空字符串""，如Constructor中所声明。并且map可用于Arrays而非string的功能。

FIX：在constructor中，请使用：this.state={ datam : [] }

要将axios响应保存到您的状态，请执行以下操作：

axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
      .then((response)=> {
        console.log(response);
        this.setState({datam:response.data});     
      })

希望这会有所帮助！

如何保存axios对变量的响应并在react js中更新状态？

DataInsertSelect.jsx

Data.jsx

2 个答案: