反应：加载axios后无法访问数据中的属性它与参数有关吗？

如何解决反应：加载axios后无法访问数据中的属性它与参数有关吗？

我正在编码MERN应用，并且几乎完成了。但是，我在显示带有数据的单个客户页面时遇到问题。

我的App.js

import React from 'react';
import { BrowserRouter as Router,Route } from "react-router-dom";
import CustomersList from "./components/customers-list";
import customerRewards from './components/customerRewards';
import "bootstrap/dist/css/bootstrap.min.css";

 
function App() {
 return (
 <Router>
    <div className="container">
      <div className="header">
        <h1>Wow Rewards Program</h1>
      </div>
      <Route path="/" exact component={CustomersList} />
      <Route path='/:id' component={customerRewards} />
    </div>
  </Router>
 );
}
 
export default App;

我的客户列表组件，用于在主页上列出客户

import React,{ Component } from 'react';
import axios from 'axios';
import CustomerCard from "./customerCard";

class CustomersList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      customers: []
    }
  }

  componentDidMount() {
    axios.get('http://localhost:5000/customers/')
     .then(response => {
       this.setState({ customers: response.data });
     })
     .catch((error) => {
        console.log(error);
     })
  }
  
  
  render() {
    const customers = this.state.customers;
    console.log("customerList",customers);
    let customersList;

    if(!customers) {
      customersList = "there is no customer record!";
    } else {
      customersList = customers.map((customer,k) =>
        <CustomerCard customer={customer} key={k} />
      );
    }

    return (
      <div>
        <h2>Customers List</h2>
        <div>
          <table>
            <thead>
            <tr>
              <th>Account</th>
              <th>Name</th>
              <th>Actions</th>
            </tr>
            </thead>
            <tbody>
              {customersList}
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}

export default CustomersList;

我的CustomerCard组件以显示每个客户

import React from 'react';
import { Link } from 'react-router-dom';

const CustomerCard = (props) => {
  const  customerCard  = props.customer;

    
    return (
      <tr>
        <td>{customerCard.account}</td>
        <td>{customerCard.name}</td>
        <td>
          <Link to={`/${customerCard.account}`}>view</Link>
        </td>
      </tr>
    )
  
}

export default CustomerCard;

我的客户奖励组件以列出客户详细信息

import React,{ Component } from 'react';
import { Link} from 'react-router-dom';
import '../App.css';
import axios from 'axios';

class customerRewards extends Component {
  constructor(props) {
    super(props);
    this.state = {
      customerRewards: {}
    };
  }

  componentDidMount() {
    // const { accountId } = this.props.match.params;
    console.log("Print id: " + this.props.match.params.id);
    axios
      .get('http://localhost:5000/customers/'+this.props.match.params.id)
      .then(res => {
        // console.log("Print-customerRewards-API-response: " + res.data);
        this.setState({
          customerRewards: res.data
        })
      })
      .catch(err => {
        console.log("Error from customerRewards");
      })
  };


  render() {

    const customerRewards = this.state.customerRewards;
    console.log("customerID",customerRewards);
    let CustomerItem = <div>
      {customerRewards.purchase_history}
    </div>

    return (
      <div >
        <div className="container">
          <div className="row">
            <div className="col-md-10 m-auto">
              <br /> <br />
              <Link to="/" className="btn btn-outline-warning float-left">
                  Back
              </Link>
            </div>
            <br />
            <div className="col-md-8 m-auto">
              <h1 className="display-4 text-center">Hello {customerRewards.name}</h1>
              <p className="lead text-center">
                  {customerRewards.account}
              </p>
              <hr /> <br />
            </div>
          </div>
          <div>
            { CustomerItem }
          </div>

        </div>
      </div>
    );
  }
}

export default customerRewards;

这是我上传到MongoDB Atlas的.json示例：

[
  {
    "account": "BCE456","name": "JohnDoe","purchase_history": [
      {
      "month": "Month01","transitions": [
        {
        "date": "01/01/2010","purchase": 120
      },{
        "date": "01/01/2010","purchase": 120
      }
    ]
    },{
      "month": "Month02","purchase": 120
      }
    ]
    }
  ]
  },{
    "account": "ABC123","purchase": 120
      }
    ]
    }
  ]
  }
]

我可以在console.log("customerID",customerRewards);中下载客户详细信息，但是，当我尝试访问{customerRewards.name}时，它根本不会显示名称...。

我想念什么？它可能与我要链接的参数有关吗？我尝试通过account而不是_id

进行链接

解决方法

您的状态customerRewards是来自API的数组。因此，即使使用对象{}声明初始状态，在这种情况下，customerRewards始终将是一个具有一个元素的数组。 API响应中可能存在问题-我不熟悉MongoDB Atlas或它是否为您创建访问模式，但是您应该能够配置为返回具有唯一ID而不是1个元素的数组的单个对象。 / p>

现在您可以这样做：

this.setState({
  customerRewards: res.data[0] /** could do res.data.shift() as well */
})

如果只有一个元素返回，我会弄清楚为什么要返回一个数组。

,

只需选择要获取名称的元素即可

customerRewards[0].name