React - setState not updating array
up vote
2
down vote
favorite
Here's my code :
class App extends Component {
state = {
query: '',
results:
}
handleSearch(e) {
var query = e.target.elements.query.value;
axios.get("http://www.omdbapi.com/?s=" + query + "&page=1&apikey=xxxx")
.then(function (response) {
console.log(response.data);
this.setState({
results: response.data.Search
});
}.bind(this))
.catch(function (error) {
});
e.preventDefault();
}
I'm trying to fetch data from omdb and show it on page.
the problem is setState not updating an array results?
Any idea ? Thanks
javascript reactjs state
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
asked Nov 11 at 21:54
Chino
133
|
show 5 more comments
up vote
2
down vote
favorite
Here's my code :
class App extends Component {
state = {
query: '',
results:
}
handleSearch(e) {
var query = e.target.elements.query.value;
axios.get("http://www.omdbapi.com/?s=" + query + "&page=1&apikey=xxxx")
.then(function (response) {
console.log(response.data);
this.setState({
results: response.data.Search
});
}.bind(this))
.catch(function (error) {
});
e.preventDefault();
}
I'm trying to fetch data from omdb and show it on page.
the problem is setState not updating an array results?
Any idea ? Thanks
javascript reactjs state
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
asked Nov 11 at 21:54
Chino
133
1
If you writeconsole.error(error);inside yourcatchfunction, does it log anything to the console? Do you get an error in the Network tab of your Developer Tools?
– Tholle
Nov 11 at 21:55
@Tholle yes ; the output is "TypeError: Cannot read property 'setState' of undefined "
– Chino
Nov 11 at 22:02
@Axnyff but I just bind it with .bind(this)
– Chino
Nov 11 at 22:02
@Chino Alright. Then you most likely need to bindhandleSearchtothisin the constructor, or makehandleSearchinto a class property arrow function:handleSearch = (e) => { ... };
– Tholle
Nov 11 at 22:03
1
Thank you so much guys, you can write it as answer if you want.
– Chino
Nov 11 at 22:15
|
show 5 more comments
up vote
2
down vote
favorite
up vote
2
down vote
favorite
Here's my code :
class App extends Component {
state = {
query: '',
results:
}
handleSearch(e) {
var query = e.target.elements.query.value;
axios.get("http://www.omdbapi.com/?s=" + query + "&page=1&apikey=xxxx")
.then(function (response) {
console.log(response.data);
this.setState({
results: response.data.Search
});
}.bind(this))
.catch(function (error) {
});
e.preventDefault();
}
I'm trying to fetch data from omdb and show it on page.
the problem is setState not updating an array results?
Any idea ? Thanks
javascript reactjs state
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
asked Nov 11 at 21:54
Chino
133
Here's my code :
class App extends Component {
state = {
query: '',
results:
}
handleSearch(e) {
var query = e.target.elements.query.value;
axios.get("http://www.omdbapi.com/?s=" + query + "&page=1&apikey=xxxx")
.then(function (response) {
console.log(response.data);
this.setState({
results: response.data.Search
});
}.bind(this))
.catch(function (error) {
});
e.preventDefault();
}
I'm trying to fetch data from omdb and show it on page.
the problem is setState not updating an array results?
Any idea ? Thanks
javascript reactjs state
javascript reactjs state
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
asked Nov 11 at 21:54
Chino
133
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
asked Nov 11 at 21:54
Chino
133
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
edited Nov 20 at 12:11
Yvette Colomb♦
20.1k1369107
20.1k1369107
asked Nov 11 at 21:54
Chino
133
asked Nov 11 at 21:54
Chino
133
asked Nov 11 at 21:54
Chino
133
133
1
If you writeconsole.error(error);inside yourcatchfunction, does it log anything to the console? Do you get an error in the Network tab of your Developer Tools?
– Tholle
Nov 11 at 21:55
@Tholle yes ; the output is "TypeError: Cannot read property 'setState' of undefined "
– Chino
Nov 11 at 22:02
@Axnyff but I just bind it with .bind(this)
– Chino
Nov 11 at 22:02
@Chino Alright. Then you most likely need to bindhandleSearchtothisin the constructor, or makehandleSearchinto a class property arrow function:handleSearch = (e) => { ... };
– Tholle
Nov 11 at 22:03
1
Thank you so much guys, you can write it as answer if you want.
– Chino
Nov 11 at 22:15
|
show 5 more comments
1
If you writeconsole.error(error);inside yourcatchfunction, does it log anything to the console? Do you get an error in the Network tab of your Developer Tools?
– Tholle
Nov 11 at 21:55
@Tholle yes ; the output is "TypeError: Cannot read property 'setState' of undefined "
– Chino
Nov 11 at 22:02
@Axnyff but I just bind it with .bind(this)
– Chino
Nov 11 at 22:02
@Chino Alright. Then you most likely need to bindhandleSearchtothisin the constructor, or makehandleSearchinto a class property arrow function:handleSearch = (e) => { ... };
– Tholle
Nov 11 at 22:03
1
Thank you so much guys, you can write it as answer if you want.
– Chino
Nov 11 at 22:15
1
1
If you write
console.error(error); inside your catch function, does it log anything to the console? Do you get an error in the Network tab of your Developer Tools?– Tholle
Nov 11 at 21:55
If you write
console.error(error); inside your catch function, does it log anything to the console? Do you get an error in the Network tab of your Developer Tools?– Tholle
Nov 11 at 21:55
@Tholle yes ; the output is "TypeError: Cannot read property 'setState' of undefined "
– Chino
Nov 11 at 22:02
@Tholle yes ; the output is "TypeError: Cannot read property 'setState' of undefined "
– Chino
Nov 11 at 22:02
@Axnyff but I just bind it with .bind(this)
– Chino
Nov 11 at 22:02
@Axnyff but I just bind it with .bind(this)
– Chino
Nov 11 at 22:02
@Chino Alright. Then you most likely need to bind
handleSearch to this in the constructor, or make handleSearch into a class property arrow function: handleSearch = (e) => { ... };– Tholle
Nov 11 at 22:03
@Chino Alright. Then you most likely need to bind
handleSearch to this in the constructor, or make handleSearch into a class property arrow function: handleSearch = (e) => { ... };– Tholle
Nov 11 at 22:03
1
1
Thank you so much guys, you can write it as answer if you want.
– Chino
Nov 11 at 22:15
Thank you so much guys, you can write it as answer if you want.
– Chino
Nov 11 at 22:15
|
show 5 more comments
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
You bind the function called when the axios requests completes correctly, but you must also bind the handleSearch method itself. You could do this in the constructor, or use a class property arrow function instead:
class App extends Component {
state = {
query: '',
results:
}
handleSearch = (e) => {
// ...
}
}
answered Nov 11 at 22:14
Tholle
33.5k53659
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253634%2freact-setstate-not-updating-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
You bind the function called when the axios requests completes correctly, but you must also bind the handleSearch method itself. You could do this in the constructor, or use a class property arrow function instead:
class App extends Component {
state = {
query: '',
results:
}
handleSearch = (e) => {
// ...
}
}
answered Nov 11 at 22:14
Tholle
33.5k53659
add a comment |
up vote
1
down vote
accepted
You bind the function called when the axios requests completes correctly, but you must also bind the handleSearch method itself. You could do this in the constructor, or use a class property arrow function instead:
class App extends Component {
state = {
query: '',
results:
}
handleSearch = (e) => {
// ...
}
}
answered Nov 11 at 22:14
Tholle
33.5k53659
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
You bind the function called when the axios requests completes correctly, but you must also bind the handleSearch method itself. You could do this in the constructor, or use a class property arrow function instead:
class App extends Component {
state = {
query: '',
results:
}
handleSearch = (e) => {
// ...
}
}
answered Nov 11 at 22:14
Tholle
33.5k53659
You bind the function called when the axios requests completes correctly, but you must also bind the handleSearch method itself. You could do this in the constructor, or use a class property arrow function instead:
class App extends Component {
state = {
query: '',
results:
}
handleSearch = (e) => {
// ...
}
}
answered Nov 11 at 22:14
Tholle
33.5k53659
answered Nov 11 at 22:14
Tholle
33.5k53659
answered Nov 11 at 22:14
Tholle
33.5k53659
answered Nov 11 at 22:14
Tholle
33.5k53659
33.5k53659
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253634%2freact-setstate-not-updating-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
If you write
console.error(error);inside yourcatchfunction, does it log anything to the console? Do you get an error in the Network tab of your Developer Tools?– Tholle
Nov 11 at 21:55
@Tholle yes ; the output is "TypeError: Cannot read property 'setState' of undefined "
– Chino
Nov 11 at 22:02
@Axnyff but I just bind it with .bind(this)
– Chino
Nov 11 at 22:02
@Chino Alright. Then you most likely need to bind
handleSearchtothisin the constructor, or makehandleSearchinto a class property arrow function:handleSearch = (e) => { ... };– Tholle
Nov 11 at 22:03
1
Thank you so much guys, you can write it as answer if you want.
– Chino
Nov 11 at 22:15