选择选项后，语义 UI 下拉菜单未设置值答案

【问题标题】：Semantic UI dropdown not setting value after selecting option选择选项后，语义 UI 下拉菜单未设置值
【发布时间】：2021-07-13 05:16:32
【问题描述】：

我正在使用 React 语义用户界面。我在 Fieldset 中呈现一个下拉列表。我编写了这样的代码，一旦选择了一个选项，就会更新选项，以便从列表中删除选定的选项。 但是当我从下拉列表中选择一个选项时，选择的值不会显示，而是显示为空。

这是我的代码：这是我的下拉代码：

<Dropdown
name={`rows.${index}.mainField`}
className={"dropdown fieldDropdown"}
widths={2}
placeholder="Field"
fluid
selection  
options={mainFieldOptions}
value={row.mainField}
onChange={(e, { value }) => {
     setFieldValue(`rows.${index}.mainField`, value)
     updateDropDownOptions(value)                               
     }
  }                                                            
/>

我的选择：

let mainField = [
    { key: "org", text: "org", value: "org" },
    { key: "role", text: "role", value: "role" },
    { key: "emailId", text: "emailId", value: "emailId" },
]

另外，我有：

const [mainFieldOptions, setMainFieldOptions] = useState(mainField)

还有，

  const updateDropDownOptions = (value:any) => {
        let updatedOptions: { key: string; text: string; value: string }[] = []
        mainFieldOptions.forEach(option => {
            if(option.key != value){
                updatedOptions.push({ key:option.key , text:option.key, value:option.key  })
            }
        })
        setMainFieldOptions(updatedOptions)
        console.log("mainfield", mainField)
    }

在 onChange 中，如果我不调用 updateDropDownOptions() 方法，则设置下拉值。但是当我调用该方法时，它会给出空白值。请帮忙。

【问题讨论】：

当您选择一个选项时，您是否检查过 Formik 中的值是否发生了变化？ .
如果我做console.log(value)，在onChange中，选择的值被打印出来
那不是formik值，是select组件返回给你的值。当您选择一个选项时，您能否检查 Formik 状态是否正在更新？ .当您选择一个选项时，您会在{row.mainField} 中得到什么？
在 {row.mainField} 中没有得到任何东西。它是空的
你能用你当前的代码添加一个沙箱吗？ .

标签： reactjs semantic-ui formik

【解决方案1】：

您的代码需要进行一些更改，

当您添加一个 [{}] 行时，您正在推送整个 initialValues，但您只需推送 {}，因此在推送方法中将您的代码更改为 initialValues[0]。
不需要维护选项的附加状态。您可以根据values.rows 中提供的其他行中的选定选项过滤选项。

用于过滤选项的工具

const getMainFieldOptions = (rows, index) => {
  const selectedOptions = rows.filter((row, rowIndex) => rowIndex !== index);

  const filteredOptions = mainField.filter(mainFieldOption => !selectedOptions.find(selectedOption => mainFieldOption.value === selectedOption.mainField));
  return filteredOptions;
}

渲染每一行时调用这个工具

values.rows.length > 0 &&
                values.rows.map((row, index) => {
                  const  mainFieldOptions = getMainFieldOptions(values.rows, index);

Working Sandbox

【讨论】：