Reactjs: Uncaught TypeError: Object(...)(...).then is not a function

Question

I have this project and in this project I have these two files, the first file is the form file, and the second file is the service file, and I want to access the answer contained within the service file, but I have this error:

Uncaught TypeError: Object(...)(...).then is not a function

how can i solve it?

And this file contains a form, and through this form, I want to call the getjobs function

import InputAdornment from "@material-ui/core/InputAdornment";
import TextField from "@material-ui/core/TextField";
import { useEffect, useState } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { getJobs } from "../../store/salaryScalesSlice";
import { useDispatch, useSelector } from "react-redux";
import { Autocomplete } from "@material-ui/lab";

function ShippingTab(props) {
  const methods = useFormContext();
  const { control } = methods;
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getJobs());
  }, [dispatch]);

  const [jobs, setJobs] = useState([]);

  useEffect(() => {
    getJobs().then((response) => setJobs(response));
  }, []);

  console.log("jobs: ", jobs);

  return (
    <div>
      <div className="flex -mx-4">
        <Controller
          name="job"
          control={control}
          defaultValue={[]}
          render={({ field: { onChange, value } }) => (
            <Autocomplete
              disablePortal
              id="combo-box-demo"
              style={{ width: 900 }}
              className="mt-8 mb-16"
              options={jobs || []}
              getOptionLabel={(option) => option.name || ""}
              value={value}
              onChange={(event, newValue) => {
                onChange(newValue);
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  placeholder="Select Job Name"
                  label="Job"
                  variant="outlined"
                  fullWidth
                  InputLabelProps={{
                    shrink: true,
                  }}
                />
              )}
            />
          )}
        />
        <Controller
          name="employeeLevel"
          control={control}
          defaultValue={[]}
          render={({ field: { onChange, value } }) => (
            <Autocomplete
              id="employeeLevel"
              style={{ width: 900 }}
              className="mt-8 mb-16 mx-4"
              options={employeeLevels || []}
              getOptionLabel={(option) => option.employeeLevel || ""}
              value={value}
              onChange={(event, newValue) => {
                onChange(newValue);
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  placeholder="Select Employee Level"
                  label="Employee Level"
                  variant="outlined"
                  fullWidth
                  InputLabelProps={{
                    shrink: true,
                  }}
                />
              )}
            />
          )}
        />

        <Controller
          name="amount"
          control={control}
          render={({ field }) => (
            <TextField
              {...field}
              className="mt-8 mb-16"
              label="Amount"
              id="amount"
              variant="outlined"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">$</InputAdornment>
                ),
              }}
              fullWidth
            />
          )}
        />
      </div>
    </div>
  );
}

export default ShippingTab;

const employeeLevels = [
  { employeeLevel: "senior" },
  { employeeLevel: "junior" },
  { employeeLevel: "mid_level" },
];

service.js:

export const getJobs = createAsyncThunk("jobsRequests/getJobs", async () => {
  const response = await axios.get("/jobs").then((res) => {
    const jobsRequestsData = res.data.data;
    console.log("jobsRequestsData: ", jobsRequestsData);
    return jobsRequestsData;
  });

  return response;
})

Answer 1

You are mixing promises and async/await toghether which leads to unexpected behaviour and therefore should be avoided.

The await keyword returns the response on which you cannot call .then()

If you want to stick with the async/await method change getjobs function to something as follows (not tested, just to give an idea)

const getJobs = async () => {
  const response = await axios.get("/jobs");
  return response.data.data;
}

otherwise you could remove the async/await keyowrds and return a promise.

---

The second problem is the createAsyncThunk. The error you get is in the useEffect hook.

As the documentation says:

The thunks generated by createAsyncThunk will always return a resolved promise

You should implement the full redux flow for setting the props. See documentation or remove it.

Answer 2

You dont need to return twice, just remove the return response:

export const getJobs = createAsyncThunk("jobsRequests/getJobs", async () => {
  const response = await axios.get("/jobs").then((res) => {
    return res.data.data
  });

})