Question

我试图在我的图像下显示一个圆形计时器，它会在 10 秒后退出页面。但它不断给出“类型错误：无法读取未定义的属性‘地图’”。有人可以帮忙吗？

import React, { useEffect } from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import { useSelector } from "react-redux";
import { useHistory } from "react-router";
import "./ChatView.css";
import { selectSelectedImage } from "./features/appSlice";

function ChatView() {
  const selectedImage = useSelector(selectSelectedImage);
  const history = useHistory();

  useEffect(() => {
    if (!selectedImage) {
      exit();
    }
  }, [selectedImage]);

  const exit = () => {
    history.replace("/chats");
  };

  return (
    <div className="chatView">
      <img src={selectedImage} onClick={exit} alt="" />
      <CountdownCircleTimer
        isPlaying
        duration={10}
        strokeWidth={6}
        size={50}
        color={[
          ["#004777", 0.33],
          ["#F7B801", 0.33],
          ["#A30000", 0.33],
        ]}
      >
        {({ remainingTime }) => {
          if (remainingTime === 0) {
            exit();
          }
        }}
      </CountdownCircleTimer>
    </div>
  );
}

export default ChatView;

Answer 1

我不确定，因为我无法通过您的描述了解您的实际问题，但我认为错误是因为颜色属性是

color={[
          ["#004777", 0.33],
          ["#F7B801", 0.33],
          ["#A30000", 0.33],
        ]}

这无法映射，所以它需要像这样

color=[
          ["#004777", 0.33],
          ["#F7B801", 0.33],
          ["#A30000", 0.33],
        ]

这仍然不是一个确定的答案，如果你还没有，你也可以试试这个

类型错误：无法读取未定义的 Countdown-react-circle-timer 的属性“map”

1 个答案: