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

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

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

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

})

Answer 2

您将 promises 和 async/await 混合在一起，这会导致意外行为，因此应该避免。

await 关键字 return 是您无法调用 .then() 的响应

如果您想坚持使用 async/await 方法，请将 getjobs 函数更改为如下内容（未测试，仅供参考）

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

否则您可以删除 async/await 关键字和 return 承诺。

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

如文档所述：

The thunks generated by createAsyncThunk will always return a resolved promise

您应该实施完整的 redux 流程来设置道具。请参阅 documentation 或将其删除。

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

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

reactjs

material-ui