Reactjs: Uncaught :Object(.)(.).then不是函数

Question

我有这个项目，在这个项目中我有这两个文件，第一个文件是表单文件，第二个文件是服务文件，我想访问服务文件中包含的答案，但是我有一个错误：

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

我该怎么解决呢？

这个文件包含一个表单，通过这个表单，我想调用getjobs函数。

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

您正在混合承诺和异步/等待以太，这将导致意外的行为，因此应该避免。

等待关键字返回不能调用.then()的响应

如果您想坚持使用异步/等待方法，请将getjobs函数更改为如下所示(没有测试，只是想给出一个想法)

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

否则，您可以删除异步/等待keyowrds并返回承诺。

第二个问题是createAsyncThunk。您得到的错误在useEffect钩子中。

如文件所述：

createAsyncThunk生成的块将始终返回一个已解决的承诺

您应该实现完整的redux流来设置道具。查看文档或删除它。

Answer 2

您不需要返回两次，只需删除返回响应：

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

})