reactjs - Prop finns inte på typen 'PropsWithChildren' när man försöker dispatcha åtgärden med react-redux

Jag får detta felmeddelande när jag försöker skicka åtgärden:

Egenskapen 'fetch_feed_loc' finns inte på typen 'PropsWithChildren<{ onSubmitForm: any; }>'.

Egenskapen 'fetch_feed_loc_srch' existerar inte på typen 'PropsWithChildren<{ onSubmitForm: any; }>'.

Men när jag gör console.log på props visar det mig att åtgärderna existerar som props.

import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { IonLabel, IonInput, IonIcon, IonItem, IonButton, IonBadge, IonSelect, IonSelectOption } from '@ionic/react';
import {navigateOutline} from 'ionicons/icons';
import { connect } from 'react-redux';
import { fetch_feed_loc, fetch_feed_loc_srch } from '../actions';

const LocationSearch: React.FC<{onSubmitForm: any}> = props => {

    console.log(props);

    const [data, setData] = useState<object>({});

    const initialValues = {
        location: '',
        searchTerm: ''
    }

    const {control, handleSubmit, errors, formState, setValue} = useForm({
        defaultValues: initialValues,
        mode : 'onChange'
    })

    const onSubmit = (data: any) => {
        const submitttedData: any = data;
        setData(submitttedData);
        submitttedData.searchTerm == '' ? props.fetch_feed_loc(submitttedData.location) : props.fetch_feed_loc_srch(submitttedData.location, submitttedData.searchTerm)
    };

    return(
        <div className="ion-padding">
            <form onSubmit={handleSubmit(onSubmit)} >
                <IonItem className="cm-form-field" lines="none">
                    <IonLabel position="floating">Location</IonLabel>
                    <Controller
                        as={IonInput}
                        control={control}
                        onChangeName="onIonChange"
                        onChange={([selected]) => {
                            return selected.detail.value;
                        }}
                        name="location"
                        rules={{
                            required: true,
                        }}
                    />
                    {errors.location ? renderErrorMessage('location'): null }
                </IonItem>
                <IonItem className="cm-form-field" lines="none">
                    <IonLabel position="floating">Search</IonLabel>
                    <Controller
                        as={IonInput}
                        control={control}
                        onChangeName="onIonChange"
                        onChange={([selected]) => {
                            return selected.detail.value;
                        }}
                        name="searchTerm"
                        rules={{
                            minLength: { value: 3, message: "Must be min 3 chars long" }
                        }}
                    />
                </IonItem>
                {errors.searchTerm ? renderErrorMessage('searchTerm'): null }
                <IonButton 
                    expand="block" 
                    shape="round" 
                    size="default"
                    type="submit"
                    disabled={formState.isValid === false}
                >
                    <IonIcon slot="start" icon={navigateOutline}></IonIcon>
                    Submit
                </IonButton>
            </form>
        </div>
    )
}

export default connect(null, { fetch_feed_loc, fetch_feed_loc_srch })(LocationSearch);

Svar #1

Jag vet inte exakt vad du har i props, men du måste beskriva det inom type eller interface. Föreställ dig att ditt props innehåller två objekt: product och user, så i det här fallet måste du beskriva dessa objekt:

    type Props = {
      product: {
        title: string;
            description: string;
            price: number;
            ...
      },
      user: {
         userName: string;
         userEmail: string:
         ...
      }
}

Och senare kan du använda denna typ och destrukturera dina props:

const LocationSearch: React.FC<Props> = ({product, user})=> ...

En sak till, använd inte ANY-typen när du använder TypeScript, TypeScript används för typer.

Relaterade artiklar