带获取的React-Native数组数据分配

Question

作为一名初学者，我正在开发一个响应式的移动应用程序。 我在使用react-native时有一个小问题。 让我详细解释一下，我想做的是从Restful api获取数据并将此数据分配给react中的数组。 下面是我的代码，用于填充数组数据。

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;
};

上面是我所有的.Js文件，它没有类声明。

有帮助吗??

Answer 1

您可以将data的初始状态作为一个空数组创建一个类组件，然后在componentDidMount挂钩中获取实际data并将其置于状态。

例

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>;
  }
}