尝试使用react-redux分派动作时,类型'PropsWithChildren'上不存在道具

发布时间:2020-07-07 15:33

我在尝试分派操作时遇到此错误:

类型'PropsWithChildren <{onSubmitForm:any上不存在属性'fetch_feed_loc'。 }>'。

类型'PropsWithChildren <{onSubmitForm:any上不存在属性'fetch_feed_loc_srch'。 }>'。

但是当我console.log道具时,它向我展示了动作作为道具而存在。

enter image description here

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);

回答1

我不知道您在 props 中究竟保存了什么,但您必须在 typeinterface 中描述它。对您的 props 进行成像会保留两个对象:productuser,因此在这种情况下,您需要描述这些对象:

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

然后你可以使用这种类型并破坏你的道具:

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

还有一点,使用 ANY 时不要使用 TypeScript 类型,TypeScript 用于类型。