get data using $.ajax in React does not work

Question

componentDidMount() {
    $.ajax({
        type: 'post',
        url: 'requests.php',
        data: {requestKey: "hello"}
    }).done(function(data){
        this.setState({
            items: data
        });
    }.bind(this));
 }

 render(){
     let items = this.state.items;
     console.log(items);
     return(
         <div id="tops">
         <h1 className="header">
             What's top!
             <a href="#" className="more">more!</a>
         </h1>
         {items.map(function(item){
             return(
                 <TopsItem
                     img={item.img}
                     heading={item.heading}
                     desc={item.desc}
                 />
             );
         })}
         </div>
     );
}

The data in state.items does not effect the components in map function. And yet I get this error:

items.map is not a function

console.log(items); works after 1sec.

At first it's empty, then it gets the data in it.

items && items.map will work

RIYAJ KHAN
– RIYAJ KHAN

2018-07-13 11:31:24 +00:00
Commented Jul 13, 2018 at 11:31 — RIYAJ KHAN
– RIYAJ KHAN, Commented Jul 13, 2018 at 11:31
@RIYAJKHAN sorry, what do you mean?

sinawic
– sinawic

2018-07-13 12:57:25 +00:00
Commented Jul 13, 2018 at 12:57 — sinawic
– sinawic, Commented Jul 13, 2018 at 12:57

Dinesh undefined · Accepted Answer · 2018-07-13 11:19:15Z

1

initial render needs your items array to be present in state of your component.

You should initialise items in constructor like this

this.state = {
    items = []
}

answered Jul 13, 2018 at 11:19

Dinesh undefined

5,5262 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

sinawic Over a year ago

sorry what do you mean, equation inside the object won't work!

Dinesh undefined Over a year ago

place the above code inside constructor of your component.

sinawic Over a year ago

Unexpected token (370:12) 368 | super(props); 369 | this.state = { > 370 | items = [] | ^ 371 | } 372 | }

Tholle · Accepted Answer · 2018-07-13 13:26:43Z

0

You need a default value for your items so that it will work until your network request has finished.

You also need to make sure that you parse the JSON string in the response of your network request.

Example

class MyComponent extends React.Class {
  state = { items: [] };

  componentDidMount() {
    $.ajax({
      type: 'post',
      url: 'requests.php',
      data: {requestKey: "hello"}
    }).done(function(data){
      this.setState({
        items: JSON.parse(data)
      });
    }.bind(this));
  }

  render() {
    // ...
  }
}

edited Jul 13, 2018 at 13:26

answered Jul 13, 2018 at 11:16

Tholle

113k22 gold badges209 silver badges198 bronze badges

4 Comments

sinawic Over a year ago

still got the same error: items.map is not a function:(

Tholle Over a year ago

@S.Mhm That's frustrating. Could you console.log your data in the response to your ajax request? It might not be an array in the response.

sinawic Over a year ago

this is the data assigned to items:

[{"img":"0.jpg","heading":"Proj 1","desc":"some text goes here!"},{"img":"0.jpg","heading":"Proj 1","desc":"some text goes here!"},{"img":"0.jpg","heading":"Proj 1","desc":"some text goes here!"}]

:( at first items value is [] then it's the json above!

Tholle Over a year ago

@S.Mhm Maybe it's a string. Have you tried parsing it in the response of the reqeust? JSON.parse(data)

ATUL DIVEDI · Accepted Answer · 2018-07-13 13:15:21Z

0

Reason JavaScript's map function works with an array, and initially this.state.items are undefined until it gets response from ajax request.

the component get rendered before the response comes from ajax and it throws the error

Solution Here we can set the initial state value {items:[]}, it must be an array, so it could execute the map() any without error.

class MyComponent extends React.Class {
   constructor(props) {
       this.state = {
           items: []
       };
   }
}

answered Jul 13, 2018 at 13:15

ATUL DIVEDI

1565 bronze badges

1 Comment

sinawic Over a year ago

I've done the same. but my component does not seem to be affected by the value change of items. the value of the items changes after ajax response but nothing happenes in the component. thanks

Collectives™ on Stack Overflow

get data using $.ajax in React does not work

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related