reactjs - 尝试使用 react-redux 分派(dispatch)操作时，类型 'PropsWithChildren' 上不存在 Prop

Question

我在尝试分派(dispatch)操作时收到此错误:

Property 'fetch_feed_loc' does not exist on type 'PropsWithChildren<{ onSubmitForm: any; }>'.

Property 'fetch_feed_loc_srch' does not exist on type 'PropsWithChildren<{ onSubmitForm: any; }>'.

但是当我使用 console.log props 时，它向我展示了作为 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);

Answer 1

我不知道你在 props 中到底保留了什么，但你必须在 type 或 interface 中描述它。只是想象你的 props 保留两个对象:product 和 user 所以在这种情况下你需要描述这些对象:

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

稍后您可以使用此类型并销毁您的 Prop :

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

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