React-native array data assignment with fetch

Question

I am developing a mobile app in react- native as a beginner. I have a little problem while using react-native. let me explain it in detail, what I am trying to do is fetching data from Restful api and assign this data to array in react. Below is my code to fill array data.

function getMoviesFromApiAsync() {
 return fetch('http://localhost:8080/JweSecurityExample/rest/security/retrieveItems')
.then((response) => response.json())
.then((responseJson) => {
  return JSON.stringify(responseJson)
})
.catch((error) => {
  console.error(error);
});
}
const initialState = {
 data: getMoviesFromApiAsync();
  };

export default (state = initialState,action ) => {
  return state;
};

Above is all my .Js file and it does not has class declaration.

Any help ??

Tholle · Accepted Answer · 2019-02-22 11:03:21Z

1

You can create a class component with the initial state of data as an empty array, and then get the real data in the componentDidMount hook and put it in state.

Example

function getMoviesFromApiAsync() {
  return fetch("http://localhost:8080/JweSecurityExample/rest/security/retrieveItems")
    .then(response => response.json())
    .catch(error => {
      console.error(error);
    });
}

class App extends React.Component {
  state = {
    data: []
  };

  componentDidMount() {
    getMoviesFromApiAsync().then(data => {
      this.setState({ data });
    });
  }

  render() {
    return <div>{JSON.stringify(this.state.data)}</div>;
  }
}

answered Feb 22, 2019 at 11:03

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

2 Comments

Tholle Over a year ago

@eccck Alright. Consider opening up another question if you can't figure it out.

eccck Over a year ago

Actually no need for another question, simply I need to get data variable outside of class declaration, but still I have not figured out how to do it. @tholle

Collectives™ on Stack Overflow

React-native array data assignment with fetch

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related