javascript - 使用 fetch 进行 React-native 数组数据分配

Question

作为初学者，我正在使用 React-Native 开发一个移动应用程序。我在使用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 Hook 并将其置于状态。

示例

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