React-Select 如何在不覆盖所选值的情况下处理默认值？

Question

我有一个表单，如果存在，我想用值预填充，但是当我像下面那样使用 React-Select 时，它不会 select [=26= 上的选项]

value={rowData?.components ? getOptions(rowData.components, components, 'name') : []}

很明显，这是有问题的部分: []。

我也试过 : null 但没有用。

当我尝试这个时，它只是没有呈现默认值：

rowData?.components && getOptions(rowData.components, components, 'name')

我该如何解决这个问题？

Answer 1

class Selector extends Component {

  constructor(){
  super(props);
  
  this.state={
    selectedValue:''
  }
  
  }
  
  componentDidMount(){
  
  /*
  
  fetch the value and assign to state
  
  */
  
  this.setState({selectedValue:fetchedValue})
  
  }
  
  render(
  
  
  return(
  
  <ReactSelect value={this.state.selectedValue} onChange={()=>this.setState({selectedValue:option})} />
  )
  )

}

发生的问题是您正在修复该值（如果该值已经存在）并且该值未更新，因此更好的选择是将该值存储在状态中，然后 onChange 更改复选框的值。

Answer 2

最后我改用了defaultValue：

defaultValue={rowData?.components ? getOptions(rowData.components, components, 'name') : []}

所以它不会覆盖 default 字段，但仍提供我需要的内容。由于某种原因，它以前没有用，但在我更新 React-Select 之后它工作正常。

React-Select 如何在不覆盖所选值的情况下处理默认值？

React-Select how to handle default value without overriding selected value?

reactjs

react-select