Question

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

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

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

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

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:
         ...
      }
}

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

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

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

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

1 个答案: