无法在反应 js 中显示从 rest API 获取的数据

Question

我有通过 rest api 获取数据的反应代码，但我无法显示 JSon 数据。请找到下面的代码从“反应”导入反应；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

您并没有真正设置状态，或者我还没有看到那种语法。

通常，我会做类似...

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 2

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

render() {

  const object = {foo: 'bar'};

  return (

    <div>

      {object}

    </div>

}

但是你可以像这样渲染它：

render() {

  const object = {foo: 'bar'};

  return (

    <div>

      {object.foo}

    </div>

}

Answer 3

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>

    )

  }

}