为何React的Select组件需点击两次才选中？求助排查

你的问题根源在于手动维护组件内部状态selectedOption和react-final-form的表单状态冲突，导致首次点击时组件自身状态与final-form管理的表单值未同步，第二次点击才完成对齐。

解决方案 #

移除组件内部的selectedOption状态，完全依赖react-final-form通过input props提供的状态管理能力，让表单库统一掌控值的变更：

修改后的Actors.jsx代码 #

import React from "react";
import Select from "react-select";

const Actors = ({ input, options }) => {
  return (
    <Select
      {...input}
      options={options}
      // 根据final-form的input.value匹配对应的option
      value={options.find(option => option.value === input.value)}
      // 将选中项的value传递给final-form的onChange
      onChange={(selected) => input.onChange(selected.value)}
      placeholder="Select Actor"
    />
  );
};

export default Actors;

原理说明 #

react-final-form的Field组件会自动将当前表单字段的value和变更回调onChange通过input props传递给子组件。之前的代码中，你同时用组件自身的selectedOption来控制Select的值，这就造成了两个状态源，首次点击时只有组件内部状态更新，但final-form的表单值未同步，导致视觉上没选中；第二次点击时两个状态才对齐，所以生效。

改为完全依赖final-form的input props后，表单状态和组件显示值完全同步，首次点击就能正确选中选项。

内容的提问来源于stack exchange，提问作者Dev9999