Php 在React Native中显示JSON数据而不使用列表？

我想知道如何使用fetchapi获取json数据，然后在不使用

列表（Flatlist、ListView等）中的
数据=
的情况下显示它。我在想这样的事情：

    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',
  },
     }

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

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

其中，“数据”是组件类中的本地对象，加载只是一个标志，用于知道何时呈现数据

那么您的渲染方法如下所示

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

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

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

希望这能有所帮助。
这对我来说很有用

在构造函数中添加状态

  constructor(props) {
    super(props);
    this.state = {
      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>
    );
  }

render（）{
返回(
{this.state.dataSource.about_info}
);
}
好的，首先要做几件事。。。您是否正在使用单个项目查看JSON数据？或者它是一个项目数组？@NemiShah只是一个项目：
{“id”：“13”，“imagename”：“hello”}
好的，我的解释比我预期的要长，所以发布了一个答案。当我尝试上面的第一个代码时，我遇到了语法错误，所以我删除了
JSON.stringify
。然后出现了另一个错误：
undefined不是一个对象（计算'\u this5.data.id'）
还要注意的是，我的注释中有多个示例数据。以防万一，这可能是原因。@NemiShahSo代码中有一些漏洞，但如果没有正确的响应示例，我无法给出完整的答案。。。或者，如果你能给我你正在点击的URL，我可以通过回复我自己对此表示抱歉，我更新了上面的问题并粘贴了json文件中的所有数据OK，所以我假设你的json数据是一个数组，里面有所有这些单独的对象。在这种情况下，你可以使用我回答的第二部分。我使用了第二个答案，我确保所有细节都是正确的。我经常遇到这样的错误：undefined不是一个对象（计算'this.data.foreach'）
  constructor(props) {
    super(props);
    this.state = {
      dataSource: ""
    };
  }

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