使用 Formik 构建向导时不能在子组件中使用道具

Question

我正在尝试构建一个表单向导。我通过 react-router 设置向导，并使用 formik 作为表单。现在我运行在创建可自定义的单选按钮时遇到了问题。为此，我使用了 react-custom-radio 库。

当我在路线之外使用单选按钮时，它可以正常工作（post 底部的代码）。

当我与路由器一起使用时，道具被传递给子组件：

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

在子组件中，我访问 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>

Answer 1

赋予render函数的props是route props listed in the documentation。在这种情况下你想要做的是从父组件传递 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>
    );
  }
}

Answer 2

如果你同时需要 Formik 的道具和这个组件，你可以这样做： render={(formikProps) => <Pricing {...formikProps}, {...props} />} 这将从两个道具创建一长串属性以供定价使用。

使用 Formik 构建向导时不能在子组件中使用道具

Can't use props in child component when using Formik for building a wizard

javascript

wizard

reactjs

react-router

formik