Javascript 使用formik响应选择：更改传递给选择的选项

我的表格中有两个选项，一个是起点，另一个是终点。我有两个数组，一个用于所有原点的原点，另一个用于目的地，它是数组中的一个数组，与给定原点的相关目的地匹配。我将这些数组传递给react select中的选项字段。 当我的原点更改时，我需要将“为目的地选择”中的选项更改为目的地内的相关数组。当原点再次改变时，我需要选择的目的地为空。 但是，如果在我更改原点时已选择目标，则react select选项中的目标数组将更改，但react select中显示的文本不会更改。感谢您的帮助。多谢各位

代码沙盒链接：

option.value===props.values.origin:“”
onChange={（选项）=>{
props.setFieldValue（'origin'，option.value）；
props.setFieldValue（'destination'，''）；
}}
/>
props.values.origin==entry.value）]
}
选项={目的地}
占位符=“到”
价值观={
目的地
？destinations.find（（option）=>option.value==props.values.destination）&&null
: ''
}
onChange={（option）=>props.setFieldValue（'destination'，option.value）}
/>

一些注意事项：

• 第二个字段有两个

  选项

• 使用

  ==

  比较值（也是第二次选择）

为这个问题提供一个Codesandbox会很有帮助，但从您的描述来看，您似乎希望将项目从一个列表移动到另一个列表， 为此，在不同的库中有一些很好的组件，称为传输/传输列表：

---

如果您想从头开始执行此操作，那么有一个问题，即如何管理字段之间的依赖关系，因为您没有通过检查

props.values.destination

是否为

”

来更新

destination

字段的值。以下是您可以进行的更改，以使其正常工作：

value={
          destinations && props.values.destination
            ? destinations.find(
                (option) => option.value === props.values.destination
              ) && null
            : ""
        }

---

编辑的沙盒

感谢您的反馈。我添加了沙盒链接，如果你能检查它将是有益的

value={
          destinations && props.values.destination
            ? destinations.find(
                (option) => option.value === props.values.destination
              ) && null
            : ""
        }