React Select 异步创建不保存到状态

Question

我正在使用 React select async creatable，来自 api 的数据正确加载并且可以 select 它也可以创建新值但是在 select 做出选择之后，如果没有，则创建一个新值，似乎我的 titleState 变空了，我尝试安慰状态，但在控制台

上给了我 blank/empty 值


const [titleState,setTitleState] = useState('')

const loadOptions = (inputValue, callback) => {
            axios.post(`sample/api`, {
                data: inputValue
            })
                .then(res => {
                    callback(res.data.map(i => ({
                        label: i.title,
                        value: i.title,
                    })))
                    console.log(res)
                })
                .catch(err => console.log(err))
    }

    const handleInputChange = (newValue) => {
        setTitleState(newValue)
    }

   const logState = () => {
      console.log(titleState) // logs empty in the devtools
   }



             <AsyncCreatableSelect
                        menuPortalTarget={document.body}
                        styles={{ menuPortal: base => ({ ...base, zIndex: 9999 }) }}
                        loadOptions={loadOptions}
                        onInputChange={handleInputChange}
                        placeholder="Title Trainings"
                    />


                 <Button onClick={logState}>Click</Button>

然后我有一些按钮，当点击将控制 titleState，但它不记录它。

Answer 1

您应该使用 onChange={handleInputChange} 而不是 onInputChange={handleInputChange}

onChange 在选择/创建新选项时触发。
onInputChange 写入新选项时触发。

React Select 异步创建不保存到状态

React Select Async creatable doesn't save to the state

reactjs

react-select

react-hooks