Question

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
   state = {user:[]}

  componentDidMount(){
    axios.get('http://a99d12de.ngrok.io/api/Docs')
      .then(res => {
        const user = res.data;
        this.setState({user});
      })
      .catch((error) =>{
        alert(error);
      })
  }

  render() {
    return (
      <div>
        <h1> names</h1>
        <ul>{this.state.user.map(person => <li>{person.data.fname}</li>)}</ul>
      </div>
    )
  }
}

export default App;

请纠正我的错误..我只是想从服务器/ url中纠正一些数据。我不知道为什么没有定义地图功能。

Answer 1

render(){

let array = this.state.user || []

return(
    <div>
        <h1> names</h1>
            <ul>
              {array.map((item,index) => ( <li key={index}> {item.fname}</li> ))}
            </ul>
    </div>

Answer 2

您的回复数据可能是.vue，您必须使用JSON String

JSON.parse(user)

Answer 3

Axios将响应包装在具有data属性的对象中。所以我想你必须做这样的事情：

axios.get('http://a99d12de.ngrok.io/api/Docs')
    .then(res => {
        // axios wrapped the data in a response object with a data property
        const data = res.data; 
        // Your API also wrapped the data in a response object with a data property :)
        const user = data.data; 
        this.setState({user});
    })
    .catch((error) =>{
        alert(error);
    })
}

请参阅axios docs here。

ReactJS - TypeError：this.state.user.map不是函数

3 个答案: