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;
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的绝对入门者。
我希望这很清楚。提前谢谢。
答案 0 :(得分:0)
此示例可以为您提供帮助
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>
)
}
}
)
}
}
答案 1 :(得分:0)
TypeError: this.state.datam.map is not a function
,因为this.state.datam
是一个空字符串""
,如Constructor
中所声明。并且map
可用于Arrays
而非string
的功能。 FIX:在constructor
中,请使用:this.state={ datam : [] }
axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5')
.then((response)=> {
console.log(response);
this.setState({datam:response.data});
})
希望这会有所帮助!