React-TypeError:无法将未定义或null转换为对象

Question

我正在我的反应应用程序中创建一个上一个和下一个按钮。我试图获取页面的当前索引（我有一个存储在对象中的页面列表）

这是密码

import React, { useState, useEffect } from "react";

function Preview({ match }) {
  const [imageName, setImageName] = useState(); //IMPORTANT
  const [images, setImages] = useState(); //IMPORTANT

  const [currentIndex, setCurrentIndex] = useState(); //IMPORTANT

  function getIndexByImageName(name) { //IMPORTANT
    Object.keys(images).map((image, index) => {
      if (image === name) return index;
    });
  }

  function importAll(r) {
    let images_ = {};

    r.keys().map((item, index) => {
      images_[item.replace("./", "")] = r(item);
    });

    return images_;
  }

  useEffect(() => {
    //This sets the state.
    setImageName(String(match.params.id));
    setImages(importAll(require.context("../coco-images", false, /\.jpg/)));
  }, []);

  useEffect(() => {
    setCurrentIndex(getIndexByImageName(imageName)); //IMPORTANT (This sets the current index. But returns an error)
  }, []);

  return null;
}

export default Preview;

我得到的错误是“类型错误：无法将未定义或空转换为对象”

需要明确的是，imageName和images不是空的或未定义的（因为当I console.log它时，它有我需要的数据）。

提前谢谢！

Answer 1

我已经修好了。

我通过创建一个状态“finishedload”来修复它，并在finishedload为true时设置该状态

下面是完整的代码

import React, { useState, useEffect } from "react";
import loading from "../images/loading.gif";

function Preview({ match }) {
  const [imageName, setImageName] = useState();
  const [images, setImages] = useState();
  const [finishedLoading, setFinishedLoading] = useState(false);
  const [currentIndex, setCurrentIndex] = useState();

  function setCurrent() {
    if (finishedLoading) {
      Object.keys(images).map((image, index) => {
        if (image === imageName) setCurrentIndex(index);
      });
    } else {
      return null;
    }
  }

  function importAll(r) {
    let images_ = {};

    r.keys().map((item, index) => {
      images_[item.replace("./", "")] = r(item);
    });

    setFinishedLoading(true);
    return images_;
  }

  useEffect(() => {
    setImageName(String(match.params.id));
    setImages(importAll(require.context("../coco-images", false, /\.jpg/)));
  }, []);

  useEffect(() => {
    if (finishedLoading) setCurrent(); //I've change getIndexByName to setCurrent
  }, [finishedLoading]);

  return null;
}

export default Preview;

Answer 2

为图像指定默认值如何：

const [images, setImages] = useState({}); //IMPORTANT