一旦useSelector钩子返回值，是否有方法重新渲染React Select组件

Question

我有一个表单，当我向其中输入数据并提交它时，我将数据发送到reducer，然后将其保存到SQL数据库。数据库会将输入的数据和一个ID返回给我，我将其存储在我的存储中。

现在我有了另一个React Select组件，我希望它将输入的数据显示为DefaultValue。

我正在寻找一种方法，当从useSelector钩子返回真值时，最好是当该值发生变化时，让React select组件重新加载。

import React, { useEffect } from 'react';
import Select from 'react-select';
import { useDispatch, useSelector } from 'react-redux';
import {
getSelectOptions,
getOptions,
setSelectionValue,
getBookOptions,
} from '../store/selectReducer';
export default function selectForm() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getSelectOptions());
}, []);
const autoren = useSelector(getOptions).autorOpts;
//>>>>>>>>>>>>>> Here I retrieve the desired data from the store <<<<<<<<<<<<<<<<<<<<<<
const DEFAULTVALUE = useSelector(store => store.authorBook.author);
const onChangeAut = option => {
dispatch(setSelectionValue(option));
dispatch(getBookOptions(option.id));
};
return (
<div>
<Select onChange={onChangeAut} defaultValue={DEFAULTVALUE} isClearable options={autoren} />
</div>
);
}

Answer 1

不要使用defaultValue，因为它无法更新。只需使用value，组件应在状态更改时自行更新。

Answer 2

如果从select components属性中删除MenuList组件，它将被修复。它对我有效。