javascript - 为什么我的异步输入在 useEffect 中未定义？

Question

我正在编写一个 React 应用程序，该应用程序从服务器获取 URL 数组的图像数据。我将相机图像存储为大字符串，并将其放入图像的 src 属性中。我正在使用 useReducer 来存储相机对象的字典。

我在让 reducer 工作时遇到了几个问题，其中之一与我对异步值的一些困惑以及为什么异步函数返回正确的输出但完成处理程序 (.then() ) 收到未定义的结果。

这里是 useEffect() 和异步获取函数的代码。

useEffect()

    //Why is cameras undefined?
    useEffect(() => {
        if (phase === 0) {
            let cameras = {}
            getCameraInformation().then((cameras) => {
                debugger;
                dispatch({
                    type: 'loadedCameraInformation',
                    payload: {cameras: cameras}
                });
            }).finally(() => setPhase(1))
        }
    });

我的函数签名和变量:

export default function Main() {
    const [state, dispatch] = useReducer(cameraReducer, initialState);
    let [phase, setPhase] = useState(0);

我的getCameraInformation函数:这将返回一个充满正确信息的字典!

async function getCameraInformation() {
  //returns a json with the following: url, cam_name, cam_pass, cam_user, channel, chunk, group, path, port,
  // uptime, username.

  let cam_json = await axios
    .get(getCamerasURL, { headers: { auth: get_cookie("token") } })
    .then(response => {
      let tempCameraArray = response.data.body;
      let tempCameraDictionary = {};

      for (var camera in tempCameraArray) {
        tempCameraDictionary[tempCameraArray[camera].sid] = {
          cameraInformation: tempCameraArray[camera],
          cameraImage: null
        };
      }

      return tempCameraDictionary;
    })
    .catch(error => console.log(error));
}

Answer 1

您的异步函数 getCameraInformation 没有 return 语句，因此它的 Promise 不会解析任何值。 then 回调中有一个 return，但那是完全不同的函数。

您还在同一个 Promise 上使用 await 和 then()，这并不理想。使用其中之一，因为在这里混合搭配时很容易感到困惑。

您已经有一个 async，因此不要在该函数中使用 then。

async function getCameraInformation() {
  //returns a json with the following: url, cam_name, cam_pass, cam_user, channel, chunk, group, path, port,
  // uptime, username.

  let response = await axios.get(getCamerasURL, { headers: { auth: get_cookie('token') } })
  let tempCameraArray = response.data.body
  let tempCameraDictionary = {}

  for (var camera in tempCameraArray) {
    tempCameraDictionary[tempCameraArray[camera].sid] = {
      cameraInformation: tempCameraArray[camera],
      cameraImage: null,
    }
  }

  return tempCameraDictionary
}