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

【问题标题】：Dropdown and value not updating in Formik + React FormFormik + React Form中的下拉列表和值未更新
【发布时间】：2019-05-05 07:54:25
【问题描述】：

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

Commodity Dropdown 初始化不正确 - 我希望 commodity 2 在加载时可用，但它需要 commodity 1 RESOVLED initialValue={values.commodity.value} 应该在商品选择中。
从商品下拉列表更改商品时，工厂下拉列表根本不更新。 [仍待处理]

工作示例 - 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 的新手，所以我可能在这里遗漏了一些非常常见的东西。

【问题讨论】：

标签： javascript reactjs forms ecmascript-6 formik

【解决方案1】：

initialValue 设置错误。它应该是字符串值而不是对象。选择值正在使用父组件的状态和道具发生变化。

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

【讨论】：