Как перенаправить на новый компонент с реквизитом при отправке с помощью React

Question

Я новичок в React и Javascript. У меня есть эта функция handleSubmit, которая успешно возвращает правильные значения для organizationId и серьезности при отправке формы Formik. Как я могу направить или перенаправить на путь, указанный ниже, с параметрами / аргументами, передаваемыми компоненту FilteredReports? Короче говоря, я фильтрую список элементов на основе этих свойств.

export class Report extends Component<IProps, {}> {
  public render() {
    return (
        <Formik
              component={Form}
              initialValues={{ organizationId: '', severity: '' }}
              onSubmit={this.handleSubmit}
        />
    )
  }

private handleSubmit = async (
    values: { organizationId: any, severity: any },
    { setSubmitting }: FormikActions<{ organizationId: any, severity: any}>,
  ) => {
    const { onSubmit } = this.props

    if (onSubmit !== undefined) {
      try {
        setSubmitting(true)
        await onSubmit(values.organizationId, values.severity) 
        return <Redirect to={FILTERED_REPORT} component={FilteredReport({id: values.organizationId, severity: values.severity})} />
      } finally {
        setSubmitting(false)
        }
    }
  }
}

Компонент FilteredReports выглядит следующим образом:

export const FilteredReport = ({ id, severity }: { id: string, severity: number }) =>
  loadComponentData(GET_FILTERED_REPORT_ASSETS_AND_EVENTS, { id, severity }, (data) => (
    <ReportScreen items={buildFilteredReportItems(data.reportOrganizations, data.facilities, data.lines, data.assets, data.events)} />
  ))

Значения определены, но onSubmit по какой-то причине не определен. Также получает ошибку typeError, которая onSubmit не является функцией. Я попытался разместить перенаправление вне попытки, но получил неверный вызов ловушки. Что я делаю не так?

Редактировать: моя форма определяется следующим образом:

export const Form = ({
  handleChange,
  handleSubmit,
  isSubmitting,
  values,
}: FormikProps<{ organizationId: any, severity: any }>) => (
  <form onSubmit={handleSubmit}>

    <Box pt={4}>
      <InputLabel htmlFor="organization-native-required">Organization</InputLabel>
      <Select
          native
          value={values.organizationId}
          onChange={handleChange('organizationId')}
          name="organizationId"
          inputProps={{
            id: 'organization-native-required',
          }}
        >
          <option value='-1'></option>
          {getOrganizations()}
        </Select>
    </Box>

    <Box pt={4}>
      <InputLabel htmlFor="severity-native-required">Severity</InputLabel>
      <Select
          native
          value={values.severity}
          onChange={handleChange('severity')}
          name="severity"
          inputProps={{
            id: 'severity-native-required',
          }}
        >
          <option value='-1'></option>
          <option value='0'>Suspect</option>
          <option value='1'>Warning</option>
          <option value='2'>Critical</option>
        </Select>
    </Box>

    <Box pt={4}>
      <Button
        color="primary"
        data-testid="submit-button"
        disabled={isSubmitting}
        type="submit"
        variant="contained"
      >
        Filter
      </Button>
    </Box>

  </form>
)

Answer 1

«Арги», о которых вы говорите, - это реквизит. В React реквизиты передаются из родительского компонента в дочерний компонент. Таким образом, вы будете передавать их из любого компонента, который визуализирует ваш компонент FilteredReport, например:

<Parent> 
<FilteredComponent id={whatever} severity={whatver}/>
</Parent>

Если вы хотите, чтобы у компонента были реквизиты по умолчанию, вы можете проверить по этой ссылке условно установить реквизиты по умолчанию , но учтите, что обычно вы этого не сделаетеэто в реакции. Вместо этого вам следует рассмотреть возможность использования state .