从axios打印对象到视图上获取reactjs的请求

Question

我目前正在尝试从我从 axios get API on reactjs 返回的响应数据中打印对象的值。

我目前有 7 个对象，其中所有的值数组都通过 console.log 返回到 DOM。我尝试使用 .map 函数从对象中打印值，但不断收到未定义错误或 this.state.thisData.map 不是函数。

关于如何从不同对象打印各种值的任何建议？

module.exports = class ViewConsultTest extends React.Component {
 constructor(props) {
        super(props);


        this.state = {
            consultData: []

        }
    }


  componentDidMount() {
    var _this = this;
    this.serverRequest =
       axios.get('/api/Consults/viewConsultData')
        .then(function(results){
          console.log(results.data);
          _this.setState({
            consultData: results.data
          });
         })
  }



  render () {
    return(
        <div>
          <h3>Returning Users:</h3>
            {this.state.consultData.consultNotes.map(function(consult) {
          return (
            <div>{consult.noteText}</div>
          );
         })}
        </div>
    );
  }
}

screenshot of the objects i am trying to access

Answer 1

将渲染方法更新为， 因为最初您没有获取数据并且渲染方法正在破坏其流程。

render () {
    var consultNotes= this.state.consultData.consultNotes;
    consultNotes = consultNotes ? consultNotes : [];
    return(
        <div>
          <h3>Returning Users:</h3>
            {consultNotes.map(function(consult) {
          return (
            <div>{consult.noteText}</div>
          );
         })}
        </div>
  );
 }