React TypeError：无法将未定义或空值转换为对象

Question

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

这是代码

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;

我得到的错误是“TypeError: Cannot convert undefined or null to object”

为了清楚起见，imageName 和 images 不为 null 或未定义（因为当我 console.log 时，它有我需要的数据）。

提前致谢！

Answer 1

我已经解决了。

我通过创建状态“finishedLoading”来修复它，并在finishedLoading 为真时设置状态

这里是完整的代码

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