我正在学习如何结合使用React和Java的tutorial（使用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的保存函数中使用调试器，但无法让它显示对象是如何加载的。我对照教程查看了一下，除了语言上的差异，它是正确的。我认为这可能是一个打字错误。