Question

我有反应代码，可以通过rest api获取数据，但是我无法显示JSon数据。请找到以下代码

从'react'导入React；

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    d: []
  }

  componentDidMount() {
    axios.get(`http://localhost:8080/login/?username=abc&password=welcome1`)
    .then(res => {
      const d = res.data;
      this.setState({ d });
    })
  }

  render() {
    return (
      <ul>
      { this.state.d}
      </ul>
    )
  }
}

Answer 1

import axios from 'axios';

export default class PersonList extends React.Component {
  constructor(props) {
super(props);

this.state = { key: []};

}

  componentDidMount() {
    axios.get(`http://localhost:8080/login/?username=abc&password=welcome1`)
    .then(res => {
      this.setState(key: res.data);
    })

}

  render() {
    return (
      <ul>
      { this.state.key}
      </ul>
    )
  }
}

Answer 2

您实际上不是在设置状态，或者我还没有看到这种语法。

通常，我会做类似...

this.setState({ stateProp: valueToAssign });

所以，就您而言...

this.setState({ d: res.data });

我认为您缺少带有类的构造函数。例如。从反应站点。

constructor(props) {
    super(props);
    // Don't call this.setState() here!
    this.state = { counter: 0 };
    this.handleClick = this.handleClick.bind(this);
}

所以就您而言...

constructor(props) {
    super(props);

    this.state = { d: [] };

}

为确保分配正确的值，我将执行“ console.log（res.data）”检查。

Answer 3

它确实取决于API响应的格式。您不能渲染这样的对象或数组：

render() {
  const object = {foo: 'bar'};
  return (
    <div>
      {object}
    </div>
}

但是您可以这样渲染它：

render() {
  const object = {foo: 'bar'};
  return (
    <div>
      {object.foo}
    </div>
}

无法显示React JS中从REST API获取的数据

3 个答案: