当更改选项道具传递给 Select 时，使用 react select 有条件地禁用选项不起作用

Question

我正在尝试有条件地禁用 select 选项，例如，如果 selected 两个项目，则禁用第三个选项，如果一个或三个项目selected，第三个选项已启用。但是，即使 Select 选项作为选项的道具传递，当 selected 项目数量发生变化时，该选项也不会改变。当我 console.log 时，当我更改 selected 项目编号时，我确实看到选项对象禁用值发生了变化。我可以知道为什么 Select 不重新渲染吗？谢谢！

class parentComponent extends PureComponent{
constructor(props) {
    super(props)
  this.state = {
    options:[]
  }
}
render() {
 const {
  countOfItems
 } = this.props
 
 let options = [...somefunction()];
 if (somecondition1) {
  options.options.filter(...)
 }
 if (somecondition2) {
  options.options.filter(...)
 }
 
 this.setState({options})
 ......
 if (countOfItems === 2) {
 options[3].disabled = true
 } else {
 options[3].disabled = false
 }
console.log(options[3])
......
return (
 <Select
  options ={options}
  isOptionDisabled = {(option) => option.disabled}
  ......


)
}
}

Answer 1

React 组件在 DOM 差异化之后呈现它们的 UI/DOM，这导致组件对 return 语句进行新引用并将更新的更改呈现给 UI。这是由 useSTATE 钩子触发的。如果您不更新状态。没有 dom 差异发生。因此，您将获得 Dom.

的旧参考

你可以这样做

class 选项 {

this.state={options:[]}


componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.countOfItems !== prevProps.countOfItems) {
let tempOptions = [...this.state.options]
if (this.props.countOfItems === 2) {
 tempOptions[3].disabled = true
 } else {
 tempOptions[3].disabled = false
 }
this.setState({options:tempOptions})
  }
}





render() {
   
    ......
    return (
     <Select
      options ={this.state.options}
      isOptionDisabled = {(option) => option.disabled}
      ......
    
    
    )
    }

当更改选项道具传递给 Select 时，使用 react select 有条件地禁用选项不起作用

conditionally disable an option using react select not work when change option props passed to the Select

reactjs

react-select

react-props