Formik + React Form 中的下拉列表和值未更新

Question

以下是我的代码面临的问题 -

商品下拉列表初始化不正确 - 我希望 commodity 2 在加载时可用，但它需要 commodity 1 RESOVLED initialValue={values.commodity.value}商品中应该有 Select.
从商品下拉列表更改商品时，植物下拉列表根本没有更新。 [仍在等待中]

工作示例 - https://codesandbox.io/s/ql95jvpxq4（正确行为）

我试图用我的 Select 复制相同的东西，但不知何故它不起作用。让我知道我在这里做错了什么。

错误代码 - https://codesandbox.io/s/01qno3vmvl

代码-

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    commodity: { value: "commodity2", label: "commodity2" },
    plant: { value: "Plant3", label: "Plant3" }
  }),
  handleSubmit: (values, { setSubmitting }) => {
    const payload = {
      ...values,
      commodity: values.commodity.value,
      plant: values.plant.value
    };
    setTimeout(() => {
      alert(JSON.stringify(payload, null, 2));
      setSubmitting(false);
    }, 1000);
  },
  displayName: "MyForm"
});

表格-

<form onSubmit={handleSubmit}>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="commodity" style={{ display: "block" }}>
            Commodity
          </label>
          <Select
            id="commodity"
            name="commodity"
            value={commodities}
            initialValue={values.commodity}
            onChange={(field, value) => {
              console.log(value);
              setFieldValue("plant", plants[value][0]);
            }}
          />
        </div>
        <div style={{ margin: "1rem 0" }}>
          <label htmlFor="plant" style={{ display: "block" }}>
            Plant
          </label>
          <Select
            id="plant"
            name="plant"
            value={plants[values.commodity.value]}
            onChange={setFieldValue}
          />
        </div>

        <button
          type="button"
          className="outline"
          onClick={handleReset}
          disabled={!dirty || isSubmitting}
        >
          Reset
        </button>
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>

        <DisplayFormikState {...this.props} />
      </form>

仅供参考 - 我是 formik 的新手，所以我可能遗漏了一些很常见的东西。

Answer 1

初始值设置错误。它应该是字符串值而不是对象。 Select 值正在使用父组件的状态和道具进行更改。

这是工作变体 https://codesandbox.io/embed/n102qqq0nl

Formik + React Form 中的下拉列表和值未更新

Dropdown and value not updating in Formik + React Form

javascript

forms

ecmascript-6

reactjs

formik