Ant Design Select问题：选中值打印旧值&默认值失效

问题1：点击选项打印的是上一次选中值 #

• 原因：React的setState是异步更新状态的，调用setVessel(evt.label)后，vessel不会立即更新，此时console.log(vessel)输出的还是更新前的旧值。
• 解决办法：
  1. 直接打印当前选中的最新值：

     const handleSelect = (value, evt) => {
       setVessel(evt.label)
       console.log(evt.label) // 直接打印当前选中的label
     }
     

  2. 用useEffect监听状态变化，更新完成后再打印：

     useEffect(() => {
       console.log(vessel)
     }, [vessel]) // 当vessel状态更新时执行打印
     
     const handleSelect = (value, evt) => {
       setVessel(evt.label)
     }
     

问题2：defaultValue不生效，useState默认值设置 #

• 原因：你给Select同时设置了value和defaultValue，此时组件会变成受控组件，defaultValue会被value覆盖，所以默认值不生效。
• 正确设置：
  因为你用vessel存储的是选中项的label，所以useState的默认值要对应默认选项的label，也就是第一个选项的'ALBIDDA'：

  const [vessel, setVessel] = useState('ALBIDDA')
  

  更推荐的做法是用vessel存储选项的value（和组件的value属性对应），逻辑更清晰：

  const [vessel, setVessel] = useState('0') // 默认值设为第一个选项的value
  
  const handleSelect = (value) => {
    setVessel(value)
    // 需要label的话，从选项数组中查找
    const selectedLabel = vesselName.find(item => item.value === value)?.label
    console.log(selectedLabel)
  }
  
  // Select组件调整为：
  <Select
    options={vesselName}
    style={{ width: '120px' }}
    onChange={handleSelect}
    value={vessel}
  />
  

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