Reactjs 显示从axios返回的响应中的数据。反应

请帮帮我！我是个新手 我能够从web服务获得响应。但我无法在屏幕上显示相同的内容（主要是在下拉菜单中显示，我还没有尝试过，因为我的第一步是查看屏幕上的数据）

我的Web服务数据：

[{“id”：1，“db_name”：“mysql”，“status”：true，“urlRequired”：true，“userNameRequired”：true，“passwordRequired”：true，“dbNameRequired”：true}]

我的代码：-

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class FetchDemo extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      posts: []
    };
  }

  componentDidMount() {
     let currentComponent = this;
    axios.get(`http://10.11.202.253:8080/ETLTool/getAllDBProfile`)
      .then(function (response) {
    console.log(response);
    console.log(response.data);

    currentComponent.setState({
        posts: response.data.items
      });


  })
  .catch(function (error) {
    console.log(error);
  });
  }

 render() {
    const renderItems = this.state.posts.map(function(item, i) {
      return <li key={i}>{item.title}</li>
    });

    return (
      <ul className="FetchDemo">
        {renderItems}
      </ul>
    );
 }
}

export default FetchDemo;

从“React”导入React；
从“react dom”导入react dom；
从“axios”导入axios；
类FetchDemo扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
员额：[]
};
}
componentDidMount（）{
让currentComponent=this；
axios.get(`http://10.11.202.253:8080/ETLTool/getAllDBProfile`)
.然后（功能（响应）{
控制台日志（响应）；
console.log（response.data）；
currentComponent.setState({
帖子：response.data.items
});
})
.catch（函数（错误）{
console.log（错误）；
});
}
render（）{
const renderItems=this.state.posts.map（函数（项，i）{
return
{item.title}
});
返回(

{renderItems}

);
}
}
导出默认的FetchDemo；

错误：-

我通过axios的响应数据：-

---

我会删除

.items

，因为您的响应不会每次都有，如果需要，只需在渲染函数中处理接收到的数据即可

您可以在设置状态时执行条件检查，因为我猜您的db可能在某个点为空：

---

currentComponent.setState（{posts:response.data？response.data:[]}）
在上述情况下，错误在于理解React的组件生命周期。

请看一下这本书

ComponentDidMount发生在渲染之后

层次结构将是
1.建造师
2.组件将安装
3.提供
4.组件安装

如果代码被修改为

render() {
    if (this.state.posts.length) {
    let renderItems = this.state.posts.map(function(item, i) {
      return <li key={i}>{item.title}</li>
    });
 }

    return (
      <ul className="FetchDemo">
        {renderItems}
      </ul>
    );
 }

个人偏好是第一个建议，因为它检查“posts”状态是否用数组初始化。如果不是数组，则map函数肯定会出错

此外，您如何从axios获得响应也可能存在问题

currentComponent.setState({
            posts: response.data.items
          });

因为我认为response.data.items不会给出任何数据，因为它应该仅限于response.data

currentComponent.setState({
                posts: response.data
              });

数据
对象中是否有名为
项
的键？否。。因为它必须是动态的。。这意味着，即使我不知道其中的数据是什么，它也应该在键值对中读取json dat a，然后显示，当您试图从
data
object中获取
items
key时，这将不起作用，
currentComponent.setState（{posts:response.data.items}），由于该密钥不存在，您会看到一个错误。您知道如何动态执行该操作吗？非常感谢。。我可以看到我的数据。
currentComponent.setState({
                posts: response.data
              });