反应代码包给出错误“未捕获的错误：超出最大更新深度”答案

【问题标题】：React ticker package giving an error "Uncaught Error: Maximum update depth exceeded"反应代码包给出错误“未捕获的错误：超出最大更新深度”
【发布时间】：2022-06-14 21:32:30
【问题描述】：

我在我的代码中使用react-ticker 包，如下所示：

import React from "react";
import "./VideoFooter.css"
import { Button, Avatar } from "@mui/material"
import MusicNoteIcon from '@mui/icons-material/MusicNote';
import Ticker from "react-ticker";

function VideoFooter({ channel, song, likes, shares, avatarSrc }) {
    console.log(song)
    return (
        <div className="videoFooter">
            <div className="videoFooter__text">
                <Avatar src={avatarSrc} />
                <h3>{channel} . <Button>Follow</Button></h3>
            </div>
            <div className="videoFooter__ticker">
                <MusicNoteIcon className="videoFooter__icon" />
                <Ticker>
                    {({ index }) => (
                        <>
                            <h1>{song}</h1>
                        </>
                    )}
                </Ticker>
            </div>
        </div>
    )
}

export default VideoFooter

每当我包含 Ticker 组件时，我都会收到如下错误：

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at checkForNestedUpdates (react-dom.development.js:27084:1)
    at scheduleUpdateOnFiber (react-dom.development.js:25266:1)
    at Object.enqueueSetState (react-dom.development.js:13234:1)
    at Ticker.Component.setState (react.development.js:354:1)
    at Ticker._this.setRect (index.js:52:1)
    at TickerElement._this.setPosition (Element.js:111:1)
    at TickerElement._this.componentDidMount (Element.js:50:1)
    at commitLayoutEffectOnFiber (react-dom.development.js:23118:1)
    at commitLayoutMountEffects_complete (react-dom.development.js:24461:1)
    at commitLayoutEffects_begin (react-dom.development.js:24447:1)

只有在我包含 Ticker 组件时才会发生这种情况。

这是我的项目层次结构：

    import React, {useState, useRef} from "react"
import "./VideoCard.css"
import VideoHeader from "./VideoHeader"
import VideoFooter from "./VideoFooter"

function VideoCard({url, likes, shares, channel, avatarSrc, song}) {
    const [isVideoPlaying, setIsVideoPlaying] = useState(false)
    const videoRef = useRef(null)
    const onVideoPress = () => {
        if (isVideoPlaying) {
            videoRef.current.pause()
            setIsVideoPlaying(false)
        } else {
            videoRef.current.play()
            setIsVideoPlaying(true)
        }
    }

    return (
        <div className="videoCard">
            <VideoHeader />
            <video className="videoCard__player"
                ref={videoRef}
                onClick={onVideoPress}
                src={url}
                alt="IG Reel Video"
                loop
                autoPlay
            />
            <VideoFooter 
                channel={channel}
                likes={likes}
                shares={shares}
                avatarSrc={avatarSrc}
                song={song}
            />
        </div>
    )
}

export default VideoCard

它包含3个部分，VideoHeader、<video />标签和VideoFooter组件。错误出现在VideoFooter 组件中。

如果需要更多信息，请发表评论。

【问题讨论】：

你能解决这个问题吗？

标签： javascript reactjs

【解决方案1】：

我有同样的问题。这似乎是 React 版本 18.0.0 发布时出现的某种冲突或问题。

作为解决方案，直到 react-ticker 库更新或找到其他解决方案，您可以从项目中删除 react 和 react-dom，然后重新安装版本 17.0.2：

yarn remove react react-dom

yarn add react@17.0.2 react-dom@17.0.2

或者使用 npm

npm uninstall react react-dom

npm install react@17.0.2 react-dom@17.0.2

我要深入挖掘一下自己，找出为什么会出现这个问题。在那之前，这应该足够了。

【讨论】：