Question

我想知道如何使用fetch API获取json数据，然后在不使用data=（Flatlist，ListView等）的Lists的情况下显示它。我在考虑这样的事情：

    export default class HomeScreen extends React.PureComponent {
    constructor(props)
{

  super(props);

  this.state = {
  isLoading: true,
};

componentDidMount(){
     fetch(`http://www.example.com/React/data.php`, {
     method: 'POST',
     headers: {
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     },
   }).then((response) => response.json())
       .then((responseJson) => {

      data = responseJson;
      this.setState({ loading: false });


   }).catch((error) => {
     console.warn(error);
   });

}

renderItems() {
  const items = [];
  this.data.foreach( ( dataItem ) => {
    items.put( <Text>{ dataItem.id }</Text> );
  } )
  return items;
}

render() {


    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }


      return(

         <View style = { styles.MainContainer }>
          <View>
           <Card>          
              <View>
              <Text>{this.renderItems()}</Text>
             </View>
           </Card>
           </View>
         </View>
       );
     }
const styles = StyleSheet.create({
  MainContainer: {
    flex:1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#333',
  },
     }

我肯定不确定它应该是什么样子，但是如果有办法做到这一点那么我猜想做那样的事情？任何帮助总是受到赞赏！

以下是数据的响应：

Here is the response of the data:

{"id":"1","imagename":"dog"}{"id":"2","imagename":"cat"}{"id":"3","imagename":"mouse"}{"id":"4","imagename":"deer"}{"id":"5","imagename":"shark"}{"id":"6","imagename":"ant"}

Answer 1

所以这是我会做的事情，并不一定是最好的方法。

componentDidMount(){
 fetch('http://www.example.com/React/data.php', {
 method: 'POST',
 headers: {
   'Accept': 'application/json',
   'Content-Type': 'application/json',
 },
 body: JSON.stringify({
   id : ?,
   imagename : ?,

 })

 }).then((response) => response.json())
     .then((responseJson) => {

      this.data = responseJson;
      this.setState({ loading: false });


 }).catch((error) => {
   console.error(error);
 });

其中'data'是组件类中的本地Object，而load只是一个标志，用于知道何时呈现数据。

然后你的渲染方法看起来像

...
{ !this.state.loading &&
    <View>
      <Text>{ this.data.id }</Text>
      <Text>{ this.data.imagename }</Text>
    <View>
}
...

渲染的组件可以随意更改为您喜欢的任何内容，但这将处理何时显示您的项目，并且可以从组件类中的任何位置访问数据。

注意：您还可以将数据保持在状态内并跳过加载标记，但这就是我通常的做法。

此外，如果你想在你的JSON数据有一系列项目的情况下做同样的事情，你可以这样做。

让我们说你的JSON响应是

{
  [
   {
    title: 'title1'
   },
   {
    title: 'title2'
   }
  ]
}

执行类似步骤，将数据保存在本地对象中。创建一个类似

的方法

renderItems() {
  const items = [];
  this.data.foreach( ( dataItem ) => {
    items.put( <Text>{ dataItem.title }</Text> );
  } )
  return items;
}

然后在你的渲染方法中

...
{ this.renderItems() }
...

希望这有帮助。

Answer 2

这对我有用。

在构造函数中添加状态

  constructor(props) {
    super(props);
    this.state = {
      dataSource: ""
    };
  }

然后，无论您是以生命周期方法还是普通函数的方式来获取数据，通常都会获取数据。只需对我们之前创建的dataSource做setState

componentDidMount() {
    const data = new FormData();
    data.append("get_about", "true");
    fetch("https://www.example.com/api/About", {
      method: "post",
      body: data
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({                                // ++++
          dataSource: responseJson                     // ++++
        });                                            // ++++
        console.log(dataSource);
      });
  }

现在，只需通过以下方式调用它即可：

render() {
    return (
      <View style={styles.container}>
        <Text>{this.state.dataSource.about_info}</Text>
      </View>
    );
  }

在不使用List的情况下在React-Native中显示JSON数据？

2 个答案: