Невозможно использовать реквизит в дочернем компоненте при использовании Formik для построения мастера - PullRequest
Новая
       12

Невозможно использовать реквизит в дочернем компоненте при использовании Formik для построения мастера

0 голосов
/ 27 июня 2018

Я пытаюсь создать мастер форм. Я настроил мастера через react-router и использовал formik для форм. Теперь я столкнулся с проблемой при создании настраиваемой радио-кнопки. Для этого я использовал библиотеку react-custom-radio.

Когда я использую радио-кнопки вне маршрутов, они работают как надо (код внизу поста).

Когда я использую с маршрутизатором, реквизиты передаются дочернему компоненту: 

<Route path="/form/location" render={(props) => (<Pricing {...props} />)} />

Внутри дочернего компонента я обращаюсь к реквизиту таким же образом, как я делал это в родительском компоненте, где он работал. 

const Pricing = (props) => {
  const {
    values,
    touched,
    errors,
    setFieldValue,
    setFieldTouched,
  } = props;
  return (
    <div>
        <MyRadio
          value={values.car}
          onChange={setFieldValue}
          onBlur={setFieldTouched}
          error={errors.car}
          touched={touched.car}
        />
    </div>
  );
}

Но теперь я всегда получаю ошибку Cannot read property 'car' of undefined. Почему не работает, если между ними есть роутер?

Если я так делаю, это работает: 

  <Form>
    <Switch>
      <Redirect from="/" exact to="/form/location" />
       <Route path="/form/location" render={(props) => (<Pricing {...props} />)} />
    </Switch>
  <MyRadio
      value={values.car}
      onChange={setFieldValue}
      onBlur={setFieldTouched}
      error={errors.car}
      touched={touched.car}
    />
  </Form>

Ответы [ 2 ]

0 голосов
/ 14 января 2019

И если вам нужны как реквизиты Формика, так и этот компонент, вы можете сделать: render={(formikProps) => <Pricing {...formikProps}, {...props} />} Это создаст длинный список атрибутов из обоих реквизитов для ценообразования.

0 голосов
/ 27 июня 2018

props, присвоенное функции render, - это маршрутные реквизиты , перечисленные в документации . В этом случае вы хотите передать props от родительского компонента, а не реквизиты маршрута: 

class ParentComponent extends React.Component {
  render() {
    const { props } = this;
    const {
      values,
      touched,
      errors,
      setFieldValue,
      setFieldTouched,
    } = props;
    return (
      <Form>
        <Switch>
          <Redirect from="/" exact to="/form/location" />
          <Route
            path="/form/location"
            render={() => <Pricing {...props} />}
          />
        </Switch>
        <MyRadio
          value={values.car}
          onChange={setFieldValue}
          onBlur={setFieldTouched}
          error={errors.car}
          touched={touched.car}
        />
      </Form>
    );
  }
}
...