程式復制具有相同ID的相同物件

我正在學習如何結合使用 React 和 Java（使用 Ionic 和 Typescript）的教程，但我對 JavaScript 了解不多。這是一個簡單的 CRUD，您可以在其中添加、編輯和洗掉串列的客戶端。很簡單，但是當我創建一個新客戶端時，它既編輯（或創建）了一個物件，又復制了它的條目。我想問題出在“保存”按鈕上，但我找不到問題所在。

這是用于創建或編輯物件的特定 editClient.tsx

const { name, id } = useParams<{
    name: string;
    id: string;
}>();

const [client, setClient] = useState<any>({});/* this array will be called when we do a search*/

useEffect(() => {search();}, []);

const history = useHistory();

const search = () => {
    if(id !== 'new') {
        let result = searchClientById(id);
        setClient(result);
    }
}

const save = () => {
    saveClient(client);
    history.push('/page/clients')
}

return (
    <IonPage>
        <IonHeader>
            <IonToolbar>
                <IonButtons slot="start">
                    <IonMenuButton />
                </IonButtons>
                <IonTitle>{name}</IonTitle>
            </IonToolbar>
        </IonHeader>

        <IonContent fullscreen>
            <IonHeader collapse="condense">
                <IonToolbar>
                    <IonTitle size="large"></IonTitle>
                </IonToolbar>
            </IonHeader>
            <IonCard>
                <IonTitle>{id === 'new' ? 'Set New Client' : 'Edit Client'}</IonTitle>
                <IonRow>
                    <IonCol>
                        <IonItem>
                            <IonLabel position="stacked">Name</IonLabel>
                            <IonInput onIonChange={e => client.firstname = e.detail.value} value={client.firstname}></IonInput>
                        </IonItem>
                    </IonCol>

                    <IonCol>
                        <IonItem>
                            <IonLabel position="stacked">Surname</IonLabel>
                            <IonInput onIonChange={e => client.surname = e.detail.value} value={client.surname}></IonInput>
                        </IonItem>
                    </IonCol>
                </IonRow>
                <IonRow>
                    <IonCol>
                        <IonItem>
                            <IonLabel position="stacked">Email</IonLabel>
                            <IonInput onIonChange={e => client.email = e.detail.value} value={client.email}></IonInput>
                        </IonItem>
                    </IonCol>

                    <IonCol>
                        <IonItem>
                            <IonLabel position="stacked">Adress</IonLabel>
                            <IonInput onIonChange={e => client.address = e.detail.value} value={client.address}></IonInput>
                        </IonItem>
                    </IonCol>
                    <IonCol>
                        <IonItem>
                            <IonLabel position="stacked">Phone</IonLabel>
                            <IonInput onIonChange={e => client.phone = e.detail.value} value={client.phone}></IonInput>
                        </IonItem>
                    </IonCol>
                </IonRow>
                <IonItem>
                    <IonButton onClick={save} color="primary" fill='solid' slot='end' size='default'>
                        <IonIcon icon={checkmark} />
                        Save Changes
                    </IonButton>
                </IonItem>
            </IonCard>
        </IonContent>
    </IonPage>
);

這是在前面的代碼中呼叫的 clientApi.tsx 中特定的 saveClient 函式

export function saveClient(client:any) { 

    let clients = searchClient(); //array with clients
    
    if(client.id) {
        //edit - search by id & replace
        let index = clients.findIndex((c:any) => c.id == client.id);
        clients[index] = client;

    }else {
        //new - generates id & does a push to the array
        client.id = Math.round(Math.random()*10000);
        clients.push(client);

    }
    clients.push(client); //in that array we add the client we recive [].push(client)
    localStorage['clients'] = JSON.stringify(clients); //we transform it into a string
}

我在 editClient.tsx 的保存功能中嘗試了一個除錯器，但無法讓它向我展示物件是如何加載的。我根據教程對其進行了審查，并排除了它所針對的語言差異。我認為這可能是一個錯字。

uj5u.com熱心網友回復：

您的 saveClient 函式的邏輯顯然有問題。您的函式末尾有一個 Clients.push(client)，因此它無論如何都會獨立于 findIndex 結果進行推送。如果找不到結果，findIndex 也會回傳 -1。這是固定版本：

export function saveClient(client:any) { 

    let clients = searchClient(); //array with clients
    
    if(client.id) {
        //edit - search by id & replace
        let index = clients.findIndex((c:any) => c.id == client.id);
        if(index >= 0){
            clients[index] = client;
        }
        else{
            clients.push(client)
        }
    }else {
        //new - generates id & does a push to the array
        client.id = Math.round(Math.random()*10000);
        clients.push(client);

    }
    localStorage['clients'] = JSON.stringify(clients); //we transform it into a string
}

標籤：javascript节点.js反应离子框架

上一篇：情節上的折線圖

下一篇：在Typescript中使用多個字串陣列