skip to Main Content

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


  1. Chosen as BEST ANSWER

    I don't know if this is correct, but it has resolved itself.
    this took the expected value.

    await dispatch(fetchAsyncSelectedAddressList(rowData.toString())).then((res) => {
     // get count of list
     const newList = res.payload as selectAddressList[]
    
     if (newList.length == 0){
      // case 0 count of list
      alert(`no data`);
      return;
     }
     else { alert(newList.length) }
    })
    

  2. we usually, use this to retrieve the stored state in redux-saga
    const updatedList = useSelector(state => state.savedMultipleList) from store.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search