Question

请帮帮我！我对reactjs很新我能够从Web服务获得响应。但是我无法在屏幕上显示相同的内容（主要是必须显示在我还没有尝试的下拉列表中，因为我的第一步是在屏幕上查看数据）。

我的网络服务数据：

[{ “ID”：1， “DB_NAME”： “MySQL的”， “状态”：真 “urlRequired”：真 “userNameRequired”：真 “passwordRequired”：真 “dbNameRequired”：真}]

我的代码： -

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;

错误： - enter image description here

我通过axios的回复数据： - enter image description here

Answer 1

我会删除.items，因为您的回复不会每次都有，只需要处理您在渲染函数中收到的数据。

你可以在设置状态时进行条件检查，因为我猜你的数据库在某些时候可能是空的：

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

Answer 2

在上述情况下，错误在于了解React的组件生命周期。

请查看reference。

在渲染发生后发生ComponentDidMount。

层次结构将是构造函数 2. componentWillMount 3.渲染 4. componentDidMount

如果使用

修改代码

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

OR

将ComponentDidMount替换为ComponentWillMount

componentWillMount() {
     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);
  });
  }

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

除此之外，您也可能存在如何从axios获取响应的问题。

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

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

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

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

2 个答案: