Question

我正在尝试从假的在线Rest api获取一些数据到状态，问题是数据没有正确地到达状态，所以它没有显示。

我试图将状态更改为array或类似firstName: '', ...，但仍然无法正常工作


import React, { Component } from 'react';
import axios from 'axios';

class Success extends Component {
  state = {
    firstName: [],
    username: [],
    email: [],
    id: [],
    show: false
  };

  componentDidMount() {
    axios
      .get('https://jsonplaceholder.typicode.com/users')
      .then(res => this.setState({ firstName: res.data.name }));
  }

  onClick = () => {
    this.setState(prevState => ({ show: !prevState.show }));
  };
  render() {
    return (
      <div>
        <h1
          className="font-weight-light"
          style={{
            color: 'black',
            marginTop: '50px'
          }}
        >
          UserList:
        </h1>
        <div className="mt-5">
          <ul className="list-group">
            <li className="list-group-item">
              {this.state.firstName}
              <div
                className="fas fa-angle-down"
                style={{ marginLeft: '98%' }}
                onClick={this.onClick}
              />
            </li>
            {this.state.show === true ? (
              <li className="list-group-item">
                Username: {this.state.username}
              </li>
            ) : null}
            {this.state.show === true ? (
              <li className="list-group-item">Email: {this.state.email}</li>
            ) : null}
            {this.state.show === true ? (
              <li className="list-group-item">ID: {this.state.id}</li>
            ) : null}
          </ul>
        </div>
      </div>
    );
  }
}

export default Success;

我想获取状态中的数据并显示出来。

Answer 1

您确定res.data.name存在吗？

似乎res.data返回数组。

您应声明用户状态为null，并将用户状态设置为res.data。

之后，您可以将Array.prototype.map与res.data一起使用

例如，

state = {
   users: null,
   whatever: ''
}

componentDidMount() {
    axios
    .get('https://jsonplaceholder.typicode.com/users')
    .then(res => this.setState({ 
        users: res.data
    }));
  }

...

// write function that takes id as parameter.
this.state.users.map(item => {
    if(item.id === id){
        this.setState({
            whatever: item.name
        })
    } return item;
})

无法获得数据响应

1 个答案: