reactjs - Why am I getting 'X is not a function or its return value is not iterable' in JavaScript?

I am trying to iterate over the result of calling function X, but I get the error: 'X is not a function or its return value is not iterable.

I am using RTK Query. I am fetching data using post call on button click.

this is how my code looks like

searchApiSlice.js

export const searchApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        searchCustomers: builder.query({
            query: (reqBody) => ({
            url: '/customers/search',
            method: 'POST',
            body: reqBody
        })
        }),
    })
});

export const { useSearchCustomersQuery } = searchApiSlice;

SearchControls.js

function SearchControls(){
  
  const req = { startDate: "2024-10-01T12:00:00", endDate: "2024-08-29T12:00:00" };

  const [ trigger, { data } ] = api.endpoints.searchCustomers.useLazyQuery();

  function handleSearch(args){
    trigger(args)
  }

  return(
    <div>
      <button type="button" onClick={() => handleSearch(req)}>Search</button>
   </div>
  );
}

export default SearchControls;

What could be causing this issue? I have checked that X is defined, but I am still encountering this error.

TypeError
(0 , _searchApiSlice__WEBPACK_IMPORTED_MODULE_1__.useSearchCustomersQuery) is not a function or its return value is not iterable

I am trying to iterate over the result of calling function X, but I get the error: 'X is not a function or its return value is not iterable.

I am using RTK Query. I am fetching data using post call on button click.

this is how my code looks like

searchApiSlice.js

export const searchApiSlice = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        searchCustomers: builder.query({
            query: (reqBody) => ({
            url: '/customers/search',
            method: 'POST',
            body: reqBody
        })
        }),
    })
});

export const { useSearchCustomersQuery } = searchApiSlice;

SearchControls.js

function SearchControls(){
  
  const req = { startDate: "2024-10-01T12:00:00", endDate: "2024-08-29T12:00:00" };

  const [ trigger, { data } ] = api.endpoints.searchCustomers.useLazyQuery();

  function handleSearch(args){
    trigger(args)
  }

  return(
    <div>
      <button type="button" onClick={() => handleSearch(req)}>Search</button>
   </div>
  );
}

export default SearchControls;

What could be causing this issue? I have checked that X is defined, but I am still encountering this error.

TypeError
(0 , _searchApiSlice__WEBPACK_IMPORTED_MODULE_1__.useSearchCustomersQuery) is not a function or its return value is not iterable

Share Improve this question edited Feb 14 at 14:11 asked Jan 14 at 13:10 noBoom 1451 gold badge3 silver badges13 bronze badges

Are you asking about 2 different problems, or is the error at the end of the post what you want specific help with? The code all seems fine to me, can you edit the title to more accurately reflect what you are asking for help with, and to add a complete minimal reproducible example? See also if you can create a running CodeSandbox demo that reproduces the issue that readers can inspect live. – Drew Reese Commented Jan 14 at 16:27
if code looks fine then yes question is about the error. – noBoom Commented Jan 14 at 17:09
Please edit to include the complete error message and any accompanying stacktrace(s), and a complete minimal reproducible example that reproduces the problem. – Drew Reese Commented Jan 14 at 20:23

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

following error went away after updating version of react and redux

TypeError
(0 , _searchApiSlice__WEBPACK_IMPORTED_MODULE_1__.useSearchCustomersQuery) is not a function or its return value is not iterable

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

reactjs - Why am I getting 'X is not a function or its return value is not iterable' in JavaScript? - Stack Over

1 Answer 1

与本文相关的文章

评论列表(0)