admin管理员组文章数量:1323336
Here is my code:
export class App extends Component {
constructor(props) {
super(props)
}
async fetchSport(sport) {
let headers = new Headers()
headers.append('key-goes-here', 'pass-goes-here')
headers.append('Accept', 'application/json')
let request = new Request('api-url-goes-here' + sport, {headers: headers})
let data = await fetch(request).then(response => response.json()).then(json => json.players.forward)
console.log(data) // 'Christopher Brown'
return data
}
render() {
return (
<div className='app'>
<SportPlayers
sport={this.fetchSport('soccer')}
/>
</div>
)
}
}
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `SportPlayers`.
I am trying to figure out why this error is showing. The fetchSport
function should be returning a string (like console.log suggests), but it seems like a promise is returned to the view instead.
Bellow is my webpack.config.js:
var webpack = require("webpack");
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
path: "/dist/assets",
filename: "bundle.js",
publicPath: "assets"
},
devServer: {
inline: true,
contentBase: "./dist",
port: 3000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ["babel-loader", 'babel-loader?presets[]=es2016,presets[]=stage-3,presets[]=react'],
},
{
test: /\.json$/,
exclude: /(node_modules)/,
loader: ["json-loader"]
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
}
]
}
}
Here is my code:
export class App extends Component {
constructor(props) {
super(props)
}
async fetchSport(sport) {
let headers = new Headers()
headers.append('key-goes-here', 'pass-goes-here')
headers.append('Accept', 'application/json')
let request = new Request('api-url-goes-here' + sport, {headers: headers})
let data = await fetch(request).then(response => response.json()).then(json => json.players.forward)
console.log(data) // 'Christopher Brown'
return data
}
render() {
return (
<div className='app'>
<SportPlayers
sport={this.fetchSport('soccer')}
/>
</div>
)
}
}
Uncaught Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `SportPlayers`.
I am trying to figure out why this error is showing. The fetchSport
function should be returning a string (like console.log suggests), but it seems like a promise is returned to the view instead.
Bellow is my webpack.config.js:
var webpack = require("webpack");
module.exports = {
entry: ["babel-polyfill", "./src/index.js"],
output: {
path: "/dist/assets",
filename: "bundle.js",
publicPath: "assets"
},
devServer: {
inline: true,
contentBase: "./dist",
port: 3000
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: ["babel-loader", 'babel-loader?presets[]=es2016,presets[]=stage-3,presets[]=react'],
},
{
test: /\.json$/,
exclude: /(node_modules)/,
loader: ["json-loader"]
},
{
test: /\.css$/,
loader: 'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.scss$/,
loader: 'style-loader!css-loader!autoprefixer-loader!sass-loader'
}
]
}
}
Share
Improve this question
asked Apr 4, 2017 at 15:55
jayscriptjayscript
3192 gold badges5 silver badges13 bronze badges
5
-
Don't call a
fetch
method fromrender
. Also,fetchSport
returns a promise, which you cannot pass toSportPlayers
– Bergi Commented Apr 4, 2017 at 16:06 - 1 Async functions always returns a promise; that's what async functions are for. – Freyja Commented Apr 4, 2017 at 16:07
-
that's the danger of using async await, people often think they are writing synchronous code, in fact async await enables you to write
asynchronous
code the same way you would write synchronous code. Maybe you should start by learning how es6 generators works to fully understand the concept of async await – Olivier Boissé Commented Apr 4, 2017 at 16:09 -
By the way the data you return at the end of your function would be reachable with this code
this.fetchSport('soccer').then(data => console.log(data))
– Olivier Boissé Commented Apr 4, 2017 at 16:13 -
@Bergi @Frxstrem @oliv37 Thanks all of you. I did not notice async functions always return a promise. So, can I still use
fetch
in this case? What is the correct context to invoke it. I am new to React. – jayscript Commented Apr 4, 2017 at 16:47
1 Answer
Reset to default 5As many people have said already, an async
function will always return a Promise
object, whose value you can then obtain by using .then()
.
In general, if you need to make many requests to a server, you should be using a state management framework such as Redux. However, Redux introduces a lot of boilerplate. If your usecase is simple, you could just use local UI state to store the result of your call.
Something like this:
export class App extends Component {
constructor(props) {
super(props)
this.state = { sport: '' }
}
ponentDidMount() {
this.fetchSport('soccer').then(sport => this.setState({ sport }))
}
async fetchSport(sport) {
let headers = new Headers()
headers.append('key-goes-here', 'pass-goes-here')
headers.append('Accept', 'application/json')
let request = new Request('api-url-goes-here' + sport, {headers: headers})
let data = await fetch(request).then(response => response.json()).then(json => json.players.forward)
console.log(data) // 'Christopher Brown'
return data
}
render() {
return (
<div className='app'>
<SportPlayers
sport={this.state.sport}
/>
</div>
)
}
}
本文标签: javascriptAsync await and fetch syntax not working in ReactStack Overflow
版权声明:本文标题:javascript - Async await and fetch syntax not working in React - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742135919a2422368.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论