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的类组件创建为一个空数组，然后在data钩子中获取真实的componentDidMount并将其置于状态。

示例

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

Answer 2

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

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

2 个答案: