箭头 function 在 React-Native 中作为道具传递在传递给它的组件中未定义

Question

我有一个容器组件：

import React, {FC, FormEvent, useState} from 'react';
// utils
import api from '../../api';
import {useAppSelector} from '../../store/hooks';
import CreateGroupPresentation from './CreateGroupPresentation';

interface Iprops {
  close: () => void;
}

interface IformState {
  title: string;
  upcs: string;
}

export interface IhandleChangeArgs {
  currentTarget: { value: string, id: string };
}

const CreateGroup: FC<Iprops> = ({close}) => {
  // get auth from redux
  const {token} = useAppSelector(state => state.auth);

  // local state for form
  const initialState: IformState = {title: '', upcs: ''};

  const [formState, setFormState] = useState(initialState);
  const {title, upcs} = formState;

  // handle change and submit for form
  const handleChange = (event: IhandleChangeArgs) => {
    const {id, value} = event.currentTarget;
    // prevents non-digits from being entered into the upc input
    if (id === 'upcs') {
      const numbers = /[\d\s]*/;
      const total = value.split('');
      const newChar = total[total.length - 1];
      if (!numbers.test(newChar)) return;
    }
    setFormState({...formState, [id]: value});
  };

  const handleSubmit = async (event: FormEvent) => {
    event.preventDefault();

    // converts the string from the upcs textarea to an array of numbers to send to the api
    const upcsToNumberArray: number[] = [];

    upcs
      .trim()
      .split('\n')
      .forEach(upc => upcsToNumberArray.push(parseInt(upc)));

    // eliminates duplicate UPCs
    const noDupes = [...new Set(upcsToNumberArray)];

    // send to api
    try {
      if (token) {
        const response = await api.createGroup(token, {
          title,
          upcs: noDupes,
        });
        console.log(response);
      }
    } catch (error: any) {
      console.log(error);
    }
  };

  const presentationProps = {handleSubmit, handleChange, title, upcs, close};

  return <CreateGroupPresentation {...presentationProps} />;
};

export default CreateGroup;

...将几个道具作为presentationProps传递给一个展示组件：

import {Modal, View} from 'react-native';
import React, {FC, FormEvent} from 'react';
import styles from './CreateGroup.scss';
import MyButton from '../shared/MyButton/MyButton';
import LabelInput from '../shared/LabelInput/LabelInput';
import {IhandleChangeArgs} from './CreateGroup';

interface Iprops {
  handleSubmit: (event: FormEvent) => Promise<void>;
  handleChange: (event: IhandleChangeArgs) => void;
  title: string;
  upcs: string;
  close: () => void;
}

const CreateGroup: FC<Iprops> = ({handleChange, title, upcs, close}) => {
  return (
    <Modal animationType="slide" transparent>
      <View style={styles['modal-back']}>
        <View style={styles['modal-fore']}>
          <LabelInput
            label="Title"
            value={title}
            onChangeText={text =>
              handleChange({
                currentTarget: {
                  value: text.valueOf().toString(),
                  id: 'title',
                },
              })
            }
          />
          <LabelInput
            label="UPCs"
            value={upcs}
            multiline
            numberOfLines={12}
            onChangeText={text =>
              handleChange({
                currentTarget: {value: text.valueOf().toString(), id: 'upcs'},
              })
            }
          />
          <MyButton onPress={close} text="close" />
        </View>
      </View>
    </Modal>
  );
};

export default CreateGroup;

...但我收到一个渲染错误消息，handleChange 不是 function，实际上是未定义的。 如何正确通过 function？ 有没有一种方法可以在不改变 function 主体本身的情况下通过它？ 我试图在我的应用程序的 react-native 版本中保持容器组件与在 web 版本中相同。

注意：handleSubmit function 当前未在演示组件中使用，但接下来我将处理它。

Answer 1

我认为您忘记将第二个文件中的演示组件从CreateGroup重命名为CreateGroupPresentation 。 现在它在两个文件中都称为CreateGroup 。 IE

 .... const CreateGroupPresentation: FC<Iprops> = ({ handleChange, title, upcs, close, }) => {... }; ... export default CreateGroupPresentation;

否则它看起来很好。