Arrays 未捕获错误：对象作为React子对象无效-从API获取数据

我正在从API获取数据：

https://60742ed3066e7e0017e79415.mockapi.io/distance

代码如下所示：

import React, {Component} from 'react';

import 'antd/dist/antd.css';

import {Button, Col, Form, Input, Layout, Row, Select} from 'antd';
import {Option} from "antd/es/mentions";

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const positionLayout = {
    labelCol: {
        width: 16,

    },
    wrapperCol: {
        span: 16,
    }
}
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

class BookHotel extends Component {
    onFinish = (values) => {
        console.log('Success:', values);
    };

    onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    constructor(props) {
        super(props);
        this.state = {
            distances: [],
            brands: [],
            selectedDistance: "",
            selectedBrand: "",
        };
    }

    componentDidMount() {

        const apiUrl = 'https://60742ed3066e7e0017e79415.mockapi.io/distance';
        fetch(apiUrl)
            .then((response) => response.json())
            .then((data) => {
                let distanceApi = data.map(distance => {
                    console.log('Distances are', distance);
                    return {value: distance, display: distance}
                });
                this.setState({
                    distances: [
                        {
                            value: "",
                        }
                    ].concat(distanceApi)
                });
            })
            .catch(error => {
                console.log(error)
            });

    }


    render() {
        return (
            <Layout>
                <Row>
                    <Col>
                        <Form
                            {...layout}
                            name="basic"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={this.onFinish}
                            onFinishFailed={this.onFinishFailed}
                        >
                            <Form.Item
                                label="Hotel Name"
                                name="hotelname"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please enter hotel name!',
                                    },
                                ]}
                            >
                                <Input/>
                            </Form.Item>

                            <Form.Item {...positionLayout}
                                       label="Hotel Location"
                                       name="hotellocation"
                                       rules={[
                                           {
                                               required: true,
                                               message: 'Please enter hotel location!',
                                           },
                                       ]}
                            >
                                <Input/>
                            </Form.Item>

                            <Form.Item
                                name="distance"
                                label="Distance"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please select a value from drop down!'
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="Select an option"
                                    allowClear
                                    value={this.state.distances}
                                    onChange={e =>
                                        this.setState({
                                            distance: e.target.value
                                        })
                                    }>
                                    {this.state.distances.map(distance => (
                                        <Option key={distance.value}
                                        value={distance.value}>{distance.value}</Option>
                                    ))}

                                </Select>
                            </Form.Item>

                            <Form.Item
                                name="brands"
                                label="Brands"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please select a value from drop down!'
                                    },
                                ]}
                            >
                                <Select
                                    placeholder="Select an option"
                                    allowClear>
                                    <Option value="amazon">Amazon</Option>
                                    <Option value="flipkart">Flipkart</Option>
                                    <Option value="paytm">Paytm</Option>
                                </Select>
                            </Form.Item>


                            {/*<Form.Item {...tailLayout} name="remember" valuePropName="checked">*/}
                            {/*    <Checkbox>Remember Details</Checkbox>*/}
                            {/*</Form.Item>*/}

                            <Form.Item {...tailLayout}>
                                <Button type="primary" htmlType="submit">
                                    Submit
                                </Button>
                            </Form.Item>
                        </Form>
                    </Col>
                </Row>
            </Layout>
        )
    }
}

export default BookHotel;  

import React，{Component}来自'React'；
导入“antd/dist/antd.css”；
从“antd”导入{按钮、列、窗体、输入、布局、行、选择}；
从“antd/es/RETIONES”导入{Option}；
常量布局={
labelCol：{
跨度：8，
},
包装纸：{
跨度：16，
},
};
常量位置布局={
labelCol：{
宽度：16，
},
包装纸：{
跨度：16，
}
}
const tailLayout={
包装纸：{
抵销：8，
跨度：16，
},
};
class BookHotel扩展组件{
onFinish=（值）=>{
log（'Success:'，值）；
};
onFinishFailed=（errorInfo）=>{
console.log（'Failed:'，errorInfo）；
};
建造师（道具）{
超级（道具）；
此.state={
距离：[]，
品牌：[]，
所选距离：“”，
选定品牌：“，
};
}
componentDidMount（）{
康斯特阿皮乌尔酒店https://60742ed3066e7e0017e79415.mockapi.io/distance';
获取（APIRL）
.then（（response）=>response.json（））
。然后（（数据）=>{
让distanceApi=data.map（距离=>{
console.log（'距离为'，距离）；
返回{值：距离，显示：距离}
});
这是我的国家({
距离：[
{
值：“”，
}
].concat（距离API）
});
})
.catch（错误=>{
console.log（错误）
});
}
render（）{
返回(
这是我的国家({
距离：e.目标值
})
}>
{this.state.distance.map（距离=>(
{distance.value}
))}
亚马逊
Flipkart
Paytm
{/**/}
{/*记住细节*/}
{/**/}
提交
)
}
}
导出默认预订酒店；

运行代码时，出现以下错误：

未捕获错误：对象作为React子对象无效（找到：具有键{status，data}的对象）

是否需要将对象转换为数组