React Axios Get：无法显示空数组答案

【问题标题】：React Axios Get: Cannot display Empty ArrayReact Axios Get：无法显示空数组
【发布时间】：2019-05-23 05:12:26
【问题描述】：

我是 React 和 Axios 的新手。我想获取客户数据，但是当他们的地址为空时，出现了一个错误

"TypeError: 无法读取未定义的属性 'street'。"

当客户有地址时，一切正常。有什么方法可以在不触及后端的情况下完成这项工作？

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

componentDidMount() {        
    axios.get(`https://api.mysite.com/customer`)
      .then(res => {
        const orders = res.data;
        this.setState({ orders });
        console.log(orders);
      })
  }

render() {
        return (
<div className="input left">
    {this.state.orders.map(order => <Input className="name" type="text" readOnly value={order.name} />)}
    {this.state.orders.map(order => <Input className="email" type="text" readOnly value={order.email} />)}
    {this.state.orders.map(order => <Input className="password" type="text" readOnly value="*******" />)}
    {this.state.orders.map(order => <Input className="address" type="textarea" readOnly value={order.address[0].street} />)}
    {this.state.orders.map(order => <Input className="phone" type="text" readOnly value={order.address[0].phone} />)}

</div>

        );
    }
}

对不起，如果名称令人困惑，我只是从我的 /order 页面复制的

这是来自 WORKING 帐户的 console.log(order)

0:
address: Array(1)
0:
city: "Jakarta Utara"
country: "Indonesia"
created_at: "2019-05-21 10:54:19"
customer_id: "c8ca7ce0-7bb6-11e9-90f8-e1b44f49dcc3"
id: "c8cc3910-7bb6-11e9-b13b-537042a9805b"
name: "fendi"
phone: "0812308123"
postal_code: "14420"
province: "DKI Jakarta"
street: "test"
updated_at: "2019-05-21 10:54:19"
__proto__: Object
length: 1
__proto__: Array(0)
created_at: "2019-05-21 10:54:19"
email: "test@gmail.com"
email_verified_at: null
id: "c8ca7ce0-7bb6-11e9-90f8-e1b44f49dcc3"
name: "test"
role_id: "a022e290-7bb6-11e9-9fb6-09e2f5236d0a"
updated_at: "2019-05-21 10:54:19"

这是来自 NOT WORKING 帐户的 console.log(order)

0:
address: Array(0)
length: 0
__proto__: Array(0)
created_at: "2019-05-21 10:53:11"
email: "test@admin.com"
email_verified_at: "2019-05-21 10:53:11"
id: "a02279a0-7bb6-11e9-8711-515da07aadda"
name: "Alisha Stamm"
role_id: "a0156ca0-7bb6-11e9-8ba3-43dcab891f96"
updated_at: "2019-05-21 10:53:11"

可以看出，抛出错误的帐户没有任何地址（如街道名称），我调用了 .address.street 这是未定义的

请帮忙，谢谢！

【问题讨论】：

我刚刚给你写了一个答案，让我知道这是否适合你:)

标签： reactjs axios

【解决方案1】：

你可以这样试试

{this.state.orders.map(order => <Input className="address" type="textarea" readOnly value={order.address.length>=0 ? order.address[0].street : ""} />)}

【讨论】：

谢谢！我没想过这样做！这在我使用 order.address.length > 0 时有效。

【解决方案2】：

    { this.state.orders.map(({ address = [{}] }) => <Input className="address" type="textarea" readOnly value={address[0].street} />) }

    { this.state.orders.map(({ address = [{}] }) => <Input className="phone" type="text" readOnly value={address[0].phone} />) }

您可以破坏订单对象并为您的对象分配初始值，这样这样的条件就不会失败。更多信息在这里https://javascript.info/destructuring-assignment

【讨论】：

【解决方案3】：

是的，在渲染方法中使用三元语句

{this.state.order.street ? (

{this.state.orders.street}

) : (

这里没有可显示的街道

)}

【讨论】：