Sorry the title is not clear.
I use React and Redux-toolkit.
I immediately referenced the updated value in the useState set function,
but I get the value before the update.
I know that useState updates are not performed immediately.
1.What we want to do
I want to immediately refer to the updated value of useState in the event.
2.summary
I want to reacquire the list in the event and make a judgment based on the number of lists
(multipleList.length) after reacquisition.
3.Code
const [ multipleList, setMultipleList ] = useState<selectAddressList[]>([])
const selAddressList = useSelectAddressList();
// ★1
useEffect(() => {
const setNewSelAddrList = () => {
if (selAddressList && selAddressList.length > 0){
const newList = [...selAddressList]
// It has been confirmed that the updated address list is stored here.
setMultipleList(newList);
}
}
setNewSelAddrList();
}, [selAddressList])
// Combo Box Change Event
const onChangeAddr3 = async(rowData:string) => {
// rowData contains a zip code.
if (rowData != ''){
// Get a list of addresses from a zip code
await dispatch(fetchAsyncSelectedAddressList(rowData.toString())) // ★2
// ★I want to be judged by the number of updated address listings.★
if (multipleList.length == 0){
XXXXXXX
}
}
};
4.supplement
★1 Event fires when the address list (selAddressList) is changed.
The selAddressList is updated with the fetchAsyncSelectedAddressList.
★2 Through Redux’s Slice, data is retrieved from the API and the address list (selAddressList)
is updated.
I created a new array within onChangeAddr3 and so on, but could not get the updated list.
Thank you.
Add Code (Code in a separate file. useSelector from Store)
export function useSelectAddressList():selectAddressList[] {
return useSelector((state:RootState) => state.selectAddressList.list);
}
export const fetchAsyncSelectedAddressList = createAsyncThunk<selectAddressList[], string>(
"address/list",
async (zipNo : string) => {
const res = await axios.get<selectAddressList[]>(`${url}xxxx/xxx`,{
params: {
zipNo: zipNo,
} as searchParams
});
return res.data;
}
);
Add Code (Code displaying screen)
<StyleFrom>
<NativeSelect
required
disabled = {disableAddress}
value = { add3Value }
onChange = {e => onChangeAddr3(e.target.value as string)}
>
<option key={0} value=''>{''}</option>
{
addr3List?
addr3List.map((row) => {
return (
<option key={row.zipNo}
value={String(row.zipNo)}>
{row.addrC}
</option>
)
})
: <option key={-1} value={0}>{'Failed'}</option>}
</NativeSelect>
</StyleFrom>
2
Answers
I don't know if this is correct, but it has resolved itself.
this took the expected value.
we usually, use this to retrieve the stored state in redux-saga
const updatedList = useSelector(state => state.savedMultipleList) from store.