Javascript application/json'}， 正文：JSON.stringify({ …有效载荷 }), }).then（res=>res.json（）） 。然后（res=>{ console.log（'res from update'，res） }).catc

application/json'}， 正文：JSON.stringify({ …有效载荷 }), }).then（res=>res.json（）） 。然后（res=>{ console.log（'res from update'，res） }).catch（错误=>{ console.log（'发生错误'，err） }) } 功能切换自定义调整（选项卡）{ 如果（activeTabJustify！==tab）{ setactiveTabJustify（选项卡）； } } 返回( 阿迪斯 米塔贝特林酒店 { 切换至“5”）； }}> 达顿 { 切换至“6”）； }}> 阿迪斯 { 切换至“7”）； }}> 卡丁车 { 切换至“8”）； }} > tba updateFormData（formData）} 占位符={props.t（'enterperformanceindex'）} />
updateFormData（e）} 占位符={props.t（'Enter Min.Customer Distance'）} />
updateFormData（e）} 占位符={props.t（'Enter Customer Distance Radius'）} 必修的 />


updateFormData（e）} 占位符={props.t（'Enter Email'）} type=“电子邮件” name=“电子邮件” 必修的 /> updateFormData（e）} 占位符={props.t（'default_address_lation'）} type=“编号” name=“编号” /> updateFormData（e）} 占位符={props.t（'default_address_longitude'）} type=“编号” name=“编号” />
updateFormData（e）} selectedValue={formData.default_address_id}>
{props.t（'Submit'）} 信托基金seitan活版，keytar粗牛仔布 keffiyeh etsy艺术派对在他们卖掉大师之前 清洁无麸质鱿鱼香脂freegan cosby 毛衣。芬妮包波特兰赛坦DIY，艺术派对 locavore wolf陈词滥调high life echo park Austin。 Cred乙烯基keffiyeh DIY salvia PBR，之前的版本 他们把农场卖给了餐桌上的VHS病毒locavore cosby 毛衣。洛莫狼病毒，胡子成衣 thundercats keffiyeh craft啤酒马尔法道德。狼 salvia freegan，keffiyeh echo公园素食主义者。

import React, {useEffect, useState, useReducer, useLayoutEffect} from 'react';
import "./formstyles.css";

//i18n
import {withNamespaces} from 'react-i18next';
import { withRouter } from "react-router-dom";

const SelectAddressComponent = (props) => {

    const [loading, setLoading] = useState(true);
    const [, forceUpdate] = useReducer(x => x + 1, 0);
    const [error, setError] = useState('');
    const [data, setData] = useState([]);
    const [formattedaddress, setAddress] = useState([])
    const useForceUpdate = () => useState()[1];
    const selectedValue = props.selectedValue;
    console.log('Adresse', selectedValue)
    let usersWithName = Object.keys(data).map(function(key) {
        JSON.stringify(data);
        let newArr = Object.keys(data);
        let mappedArr = newArr.map(function (i) {
            return [i, data[i]];
        })
        let formattedaddress = mappedArr[18];
        return formattedaddress
    });

    useEffect(() => {
        setAddress(
            usersWithName
        )
    },[])

  /*  useLayoutEffect(() => {
        let a = document.getElementsByClassName('address-select');
        a.addEventListener('change', forceUpdate);
        console.log('useLayouteffect ===>')
        return () => window.removeEventListener('selectionchange', forceUpdate);
    }, []);
*/
    useEffect(() => {
        setLoading(true);
        fetch('http://tpservice:8888/api/v1/address')
            .then((response) => response.json())
            .then((data) => {
                setLoading(false);
                setData(data);
            })

            .catch((e) => {
                setLoading(false);
                setError('fetch failed');
            });
    }, []);

    if (loading) {
        return <span>loading..</span>;
    }

    if (error !== '') {
        return <>ERROR: {error}</>;
    }



    return (
        <React.Fragment>
           <div className="clearfix">
                <div className="float-left">
                    <div className="input-group input-group-sm">
                        <div className="input-group-append">
                            <label className="input-group-text">Adresse</label>
                        </div>
                        <select name="default_address_id" data-value={props.selectedValue} onChange={props.onChange} className="custom-select custom-select-sm">
                            {data.map((element) => (
                                <option value={element.id} selected={element.id==props.selectedValue ? true : false}> {element.formattedaddress}</option>
                            ))}
                        </select>
                    </div>
                </div>
            </div>
        </React.Fragment>
    );
}

export default withRouter(withNamespaces()(SelectAddressComponent));

import React, {Component, useContext, useEffect, useRef, useState} from 'react';
import "./formstyles.css";
import {
    Row,
    Col,
    Card,
    CardBody,
    CardTitle,
    CardSubtitle,
    Nav,
    NavItem,
    TabPane,
    CardText, NavLink, TabContent

} from "reactstrap";
//i18n
import {withNamespaces} from 'react-i18next';

    //Import Breadcrumb

    import { withRouter } from "react-router-dom";
    import classnames from "classnames";
    import EmployeesList from "../../pages/Employees/employees-list";
    import EmployeeIdComponent from "./EmployeeId";

    import EmployeeId from "./EmployeeId";
import MapsComponent from "./MapsComponent";
import SelectAddressComponent from "./SelectAddressComponent";
const OverlayComponent = (props) => {
   const nameForm = useRef(null)
    const [employeeIdInOverlay, setEmployeeInOverlay] = useState()
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const [data, setData] = useState('');
    const [customActiveTab, setcustomActiveTab] = useState("1");
    const [activeTabJustify, setactiveTabJustify] = useState("5");

    function useForceUpdate(){
        const [value, setValue] = useState(0); // integer state
        return () => setValue(value => ++value); // update the state to force render
    }

    console.log('employeeId in Form Component',props);
    const [formData, setFormData] = useState({
        firstname: "",
        lastname: "",
        email: "",
        address: "",
        performance_index: "",
        min_customer_distance:"",
        customer_distance_radius:"",
        employeeId: "",
        default_address_longitude: "",
        default_address_latitude: "",
        resource_id: "0",
        users: []
    });
    const [payload, setPayload] = useState({});

    const updateFormDataOld = e => {
        const {name, value} = e.target;
        console.log(name, value);
        setFormData({
            ...formData,
            [name]: value
        })
        console.log(payload);
    }

    const updateFormData = e => {
        const {name, value} = e.target;
        console.log(name, value);
        setPayload({
            ...payload,
            [name]: value
        })
        setFormData({
            ...formData,
            [name]: value
        })
        console.log(payload, 'Reload');

    }

    useEffect(() => {
        setLoading(true);
        fetch('http://tpservice:8888/api/v1/employee/' + props.employeeId)
            .then((response) => response.json())
            .then((data) => {
                setLoading(false);
                setFormData(data);
                console.log(data,'Data Objekt');
            })

            .catch((e) => {
                setLoading(false);
                setError('fetch failed');
            });
    }, []);

    if (loading) {
        return <span>loading..</span>;
    }

    if (error !== '') {
        return <span>ERROR: {error}</span>;
    }

    const submit =  e => {
        e.preventDefault();
        const {employeeId} = props;
        console.log('employeeId', employeeId)
        fetch(`http://tpservice:8888/api/v1/employee/` + employeeId, {
            method: 'PUT',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                ...payload
            }),
        }).then(res => res.json())
            .then(res => {
                console.log('res from update', res)
            }).catch(err => {
            console.log('an error occurred', err)
        })
    }

    function toggleCustomJustified(tab) {
        if (activeTabJustify !== tab) {
            setactiveTabJustify(tab);
        }
    }

    return (

        <div className="overlay">
            <Card>
                <CardBody>
                    <CardTitle>Adresse</CardTitle>
                    <h3>Mitarbeiterinformationen aktualisieren</h3>
                    <CardSubtitle className="mb-3">
                    </CardSubtitle>
                    <Nav tabs className="nav-tabs-custom nav-justified">
                        <NavItem>
                            <NavLink
                                style={{cursor: "pointer"}}
                                className={classnames({
                                    active: activeTabJustify === "5"
                                })}
                                onClick={() => {
                                    toggleCustomJustified("5");
                                }}>
                                <span className="d-none d-sm-block">Daten</span>
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                style={{cursor: "pointer"}}
                                className={classnames({
                                    active: activeTabJustify === "6"
                                })}
                                onClick={() => {
                                    toggleCustomJustified("6");
                                }}>
                                <span className="d-none d-sm-block">Adresse</span>
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                style={{cursor: "pointer"}}
                                className={classnames({
                                    active: activeTabJustify === "7"
                                })}
                                onClick={() => {
                                    toggleCustomJustified("7");
                                }}>
                                <span className="d-none d-sm-block">Karte</span>
                            </NavLink>
                        </NavItem>
                        <NavItem>
                            <NavLink
                                style={{cursor: "pointer"}}
                                className={classnames({
                                    active: activeTabJustify === "8"
                                })}
                                onClick={() => {
                                    toggleCustomJustified("8");
                                }}
                            >
                                <span className="d-none d-sm-block">tba</span>
                            </NavLink>
                        </NavItem>
                    </Nav>

                    <TabContent activeTab={activeTabJustify}>
                        <TabPane tabId="5" className="p-3">
                            <Row>
                                <Col sm="12">
                                        <form ref={nameForm} onSubmit={submit}>
                                            <input
                                                type="text"
                                                name="performance_index"
                                                value={formData.performance_index}
                                                onChange={formData => updateFormData(formData)}
                                                placeholder={props.t('Enter Performance Index')}
                                            />
                                            <br/>
                                            <input
                                                type="text"
                                                name="min_customer_distance"
                                                value={formData.min_customer_distance}
                                                onChange={e => updateFormData(e)}
                                                placeholder={props.t('Enter Min. Customer Distance')}
                                            />
                                            <br/>
                                            <input
                                                type="text"
                                                name="customer_distance_radius"
                                                value={formData.customer_distance_radius}
                                                onChange={e => updateFormData(e)}
                                                placeholder={props.t('Enter Customer Distance Radius')}
                                                required
                                            />
                                            <br/>
                                            <input
                                                value={formData.firstname}
                                                onChange={updateFormData}
                                                placeholder={props.t('Enter Firstname')}
                                                type="text"
                                                name="firstname"
                                                required
                                            />
                                            <br/>
                                            <input
                                                value={formData.lastname}
                                                onChange={updateFormData}
                                                placeholder={props.t('Enter Lastname')}
                                                type="text"
                                                name="lastname"
                                                required
                                            />
                                            <br/>
                                            <input
                                                value={formData.email}
                                                onChange={e => updateFormData(e)}
                                                placeholder={props.t('Enter Email')}
                                                type="email"
                                                name="email"
                                                required
                                            />
                                            <input
                                                value={data.default_address_latitude}
                                                onChange={e => updateFormData(e)}
                                                placeholder={props.t('default_address_latitude')}
                                                type="number"
                                                name="number"

                                            />
                                            <input
                                                value={data.default_address_longitude}
                                                onChange={e => updateFormData(e)}
                                                placeholder={props.t('default_address_longitude')}
                                                type="number"
                                                name="number"
                                            />
                                            <br/>
                                           <SelectAddressComponent onChange={e => updateFormData(e)}
                                                                   selectedValue={formData.default_address_id}></SelectAddressComponent>
                                            <br/>
                                            <button  type="submit">{props.t('Submit')}</button>
                                        </form>

                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane tabId="6" className="p-3">
                            <Row>
                                <Col sm="12">
                                    <CardText>
                                    </CardText>
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane tabId="7" className="p-3">
                            <Row>
                                <Col sm="12">
                                   <CardText>
                                        <MapsComponent default_address_latitude={formData.default_address_latitude}
                                                       default_address_longitude={formData.default_address_longitude}>

                                        </MapsComponent>
                                    </CardText>
                                </Col>
                            </Row>
                        </TabPane>

                        <TabPane tabId="8" className="p-3">
                            <Row>
                                <Col sm="12">
                                    <CardText>
                                        Trust fund seitan letterpress, keytar raw denim
                                        keffiyeh etsy art party before they sold out master
                                        cleanse gluten-free squid scenester freegan cosby
                                        sweater. Fanny pack portland seitan DIY, art party
                                        locavore wolf cliche high life echo park Austin.
                                        Cred vinyl keffiyeh DIY salvia PBR, banh mi before
                                        they sold out farm-to-table VHS viral locavore cosby
                                        sweater. Lomo wolf viral, mustache readymade
                                        thundercats keffiyeh craft beer marfa ethical. Wolf
                                        salvia freegan, sartorial keffiyeh echo park vegan.
                                    </CardText>
                                </Col>
                            </Row>
                        </TabPane>
                    </TabContent>
                </CardBody>
            </Card>
        </div>);

}
export default withRouter(withNamespaces()(OverlayComponent));