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

您的async function getCameraInformation没有return语句，因此其诺言不会解析任何值。 return回调中有一个then，但这是一个完全不同的功能。

您还在同一承诺上使用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
}

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

1 个答案: