Question

如何呈现get响应，例如3个div（firstname，lastname），尝试这样做几天没有任何反应我是在jquery上做的，但现在我需要做出反应

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

import axios from 'axios';

class Table extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        data: []
    };
}

componentDidMount() {
    axios
        .get('http://server.noorsoft.ru:9022/api/records')
        .then(({ data })=> {
            this.setState({
                data: data.data
            });
        })
}

render() {
    const getDataRender = // here render div //
        return <div>
        </div>
    });

    return <div>
        <div>{ getDataRender }</div>
    </div>;
}

class App extends Component {
render() {
    return (
        <div className="App">
            <Table />
        </div>
    );
}
}

export default App;

如果你详细描述我的错误

，那就太好了

Answer 1

试试这个：

axios.get('http://server.noorsoft.ru:9022/api/records')
        .then(({ data })=> {
            this.setState({
                data: data
            });
        })

您已经对数据进行了解构，因此您不需要执行data.data，而只需要执行数据。在render方法中，如果你只想渲染数据数组，你可以这样做：

render() {
  return(
   <div>
    {this.state.data.map(record => <div>{record.firstName+' '+record.lastName}</div>)}
   </div>
  )
}

Axios渲染获取数据

1 个答案: