Reactjs react原生AJAX&；API-呈现JSON数据

我真的是个反应新手。我的问题是如何迭代组件并呈现json数据。这是我的密码：

import React from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import { Divider } from 'react-native-elements';
import { limitUI04 } from 'uuid-js';


export default class SearchProperty extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    }
  }

  componentDidMount() {
    fetch("myapiendpoint", {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    })
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.data
          });
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    {
      items.map(key => {
        return (
          <Text>
            {key.id}
          </Text>
        )
      })
    }
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

从“React”导入React；
从“react native”导入{ScrollView，样式表，文本，视图}；
从“react native elements”导入{Divider}；
从“uuid js”导入{limitUI04}；
导出默认类SearchProperty扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：null，
isLoaded:false，
项目：[]
}
}
componentDidMount（）{
获取（“myapident”{
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”，
},
})
.then（res=>res.json（））
.那么(
（结果）=>{
这是我的国家({
isLoaded：是的，
项目：结果数据
});
},
（错误）=>{
这是我的国家({
isLoaded：是的，
错误
});
}
)
}
render（）{
const{error，isLoaded，items}=this.state；
{
items.map（key=>{
返回(
{key.id}
)
})
}
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});

上面的我的代码返回错误：

不变冲突：不变冲突：SearchProperty（…）：无 已从渲染返回。这通常意味着返回语句是 丢失的或者，要不呈现任何内容，请返回null

---

请帮助

您在渲染后缺少返回语句

render() {
    const { error, isLoaded, items } = this.state;
    return (
     <div>
      {
       items.map(key => {
        return (
          <Text key={key.id}>
            {key.id}
          </Text>
        )
      })
    }
   </div>
  }
 )
}

我将didMount更改为WillMount（）。WillMount（）将在呈现任何内容之前装载（双关语不是故意的）。然后该组件将渲染贴图函数。因此状态被更新。我将WillMount（）中的项发送到一个新函数displaytems，以额外保证状态将更新。希望这有帮助

编辑：警告

---

我在这里使用了WillMount（），但没有包括不安全的<代码>组件willmount（）在版本17之后将不再工作。您可以使用不安全的组件willmount（）。这将在第17版中起作用。对此很抱歉（我习惯于从IntelliSense中挑选）

您缺少return语句…我的return就在那里，在map方法中@Benssteves在我的代码中，我创建了componentDidMount（）方法，该方法会自动执行吗@BensStevesyes您的componenetDidMount将自动执行。map函数中的return语句仅用于map函数。它是该函数的返回语句。但是react需要在render（）之后使用return语句{…如果您忽略了这一点，react不知道该做什么，也不知道如何解释映射函数。您可以在react的文档网站上搜索生命周期方法，以更好地了解每一种方法。下面是链接：outter return语句中的方括号生成errorah是的，谢谢。您需要在每个r中使用根div或根元素eturn语句。对此很抱歉。您不能有多个根元素。因此，请参见div…您只能有一个外部div，不能有相邻div的like…map函数。这在react中是一个no no。如果不能有相邻的jsx元素，则会出现解析错误。或者jsx元素必须包装在一个封闭的标记中。请注意，我只是在使用div作为一个例子，它可以是任何元素。嗯，现在我有一个新的错误。我的items对象未定义。你能再次找出错误吗？你在哪里设置了你的items？或者你在哪里定义了items？不是const{items}=this.state部分，而是在你的源代码中你实际上在哪里为items赋值

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
class App extends Component {
  state = {
    error: null,
    isLoaded: false,
    items: [
      { id: 1, name: "Apples", price: "$2" },
      { id: 2, name: "Peaches", price: "$5" }
    ]
  };
  componentWillMount() {
    this.setState({ items: [...this.state.items, { id: 3 }] }, () => {
      this.displayItems(this.state.items);
    });
  }
  displayItems = items => {
    console.log(items);
    return items.map(key => {
      return <div key={key.id}>{key.id}</div>;
    });
  };
  render() {
    const { items } = this.state;
    return <div>{this.displayItems(items)}</div>;
  }
}

export default App;