react select 如何从后端获取下拉框的值

Question

const processData=['process1','process2','test'];
const productData={
    process1:['pro1','pro2','pro3'],
    process2:['pro4','pro5','pro6'],
    test:['1']
};
const seamData={
    pro1:['s1','s2'],
    pro2:['s3'],
    pro3:['s4'],
    pro4:['s5'],
    pro5:['s6'],
    pro6:['s7','s8'],
    1:['1']
};
class _CreateOrderTask extends React.Component<Props> {
    state = {
        loading: false,
        pagination : { pageSize: 5, current: 1 },
        orderId:'',
        seams:productData[processData[0]],
        seams0:productData[processData[0]][0],
        seams1:seamData[productData[processData[0]][0]],
        //seams2:seamData[productData[processData[0]][0]][0],
    };


    handleProcessChange = (value:any) => {
        this.setState({
            seams: productData[value],
            seams0:productData[value][0],
        });
    };
    handleProductChange = (value:any) => {
        this.setState({
            seams1:seamData[value],
            seams2:seamData[value][0],
        });
    };
    onSecondSeamChange = (value:any) => {
        this.setState({
            seams2: value,
        });
    };
        public render() {
        const { getFieldDecorator } = this.props.form;
        const { seams,seams1 } = this.state;
        return (
            <div>
                <h1 style={{ paddingLeft: 20 }}>请填写任务信息</h1>
                <Spin spinning={this.state.loading}>
                    <Form style={{ width: 500, marginTop: 20, marginLeft: "auto", marginRight: "auto" }} onSubmit={this.handleSubmit}>
                        <Item {...formItemLayout} label={"选择产品"}>{
                        getFieldDecorator('orderProcess', {
                            rules: [{ required: true, message: '选择产品' }],
                            initialValue:this.props.orderProcess
                        })(
                            <Select
                                placeholder="请选择产品"
                                defaultValue={processData[0]}
                                style={{ width: 120 }}
                                onChange={this.handleProcessChange}
                            >
                                {processData.map(process => (
                                    <Option key={process}>{process}</Option>
                                ))}
                            </Select>
                        )}
                        </Item>
                        <Item {...formItemLayout} label={"选择部件"}>{
                            getFieldDecorator('orderProduct', {
                                rules: [{ required: true, message: '选择部件' }],
                                initialValue:this.props.orderProduct
                            })(
                                <Select
                                    defaultValue={this.state.seams0[0]}
                                    style={{ width: 120 }}
                                    value={this.state.seams0}
                                    onChange={this.handleProductChange}
                                >
                                    {seams.map((seam:any) => (
                                        <Option key={seam}>{seam}</Option>
                                    ))}
                                </Select>
                            )}
                        </Item>
                        <Item {...formItemLayout} label={"选择接口"}>{
                            getFieldDecorator('orderSeam', {
                                rules: [{ required: true, message: '选择接口' }],
                                initialValue:this.props.orderSeam
                            })(
                                <Select
                                    defaultValue={this.state.seams1[0]}
                                    style={{ width: 120 }}
                                    value={this.state.seams1}
                                    onChange={this.onSecondSeamChange}
                                >
                                    {seams1.map((seam1:any) => (
                                        <Option key={seam1}>{seam1}</Option>
                                    ))}
                                </Select>
                            )}
                        </Item>
                        <Item>
                            <Row style={{ marginTop: 50 }}>
                                <Col span={11} style={{ textAlign: "right" }}>
                                    <Button key="cancel" size={"large"} onClick={this.onCancel}>
                                        取&nbsp;&nbsp;&nbsp;&nbsp;消
                                    </Button>
                                </Col>
                                <Col span={1}>&nbsp;
                                </Col>
                                <Col span={12}>
                                    <Button key="ok" type="primary" htmlType="submit" size={"large"} loading={false}>
                                        确&nbsp;&nbsp;&nbsp;&nbsp;定
                                    </Button>
                                </Col>
                            </Row>
                        </Item>
                    </Form>
                </Spin>
            </div>
        );
    }

问题描述：现在只是写死的数据实现了三级联动，现在问题是我想把写死的数据改成我从后台获取的值，产品，部件，接口分别是数据库中的三个表。。。

Answer 1

1.第一级onChange的时候，清空第二级的options和form的值。清空第三级的options和form的值
2.查询第二级的后台接口，返回第二级的options，merge这个options。这样第二级就有数据了

3.第二个onChange的时候，清空第三级的options和form的值
4.查询第三级的后台接口，返回第三级的options，merge这个options，这样第三级就有了。