setState 仅在生产构建时引发 Minified React 错误 #130

Question

每次我与应用程序首页上的下拉按钮交互时，控制台都会记录错误 https://reactjs.org/docs/error-decoder.html/?invariant=130&args。这只是当我将它推送到我的生产服务器时，它在开发环境中工作正常。

我已经调试了堆栈跟踪的每一部分，并从 Quicklinks class 中的 collapse 函数追踪到 setState 方法。这在 QLButton class 中调用，它是 Quicklinks.

的子项

export default class Quicklinks
    extends React.Component<Props> {
    props: Props;
    state: State;
    constructor(props: Props) {
        super(props);
        this.props = props;
        this.collapse = this.collapse.bind(this);

        this.state = {
            collapsed: true
        }
    }

    // Collapse function intended to be called in a child
    // Invoking this crashes the page
    collapse = () => this.setState({ collapsed: !this.state.collapsed });
    


    private QuickLinkExpanded = () =>
        <>
            <ul className="ql-expanded-container ql-links ql-tree-stem">
                <button className="ql-expanded-title clickable"
                    onClick={this.collapse}>{this.props.title}</button>
                {this.props.children}
            </ul>
        </>

    public static Item = (props: { link: string, name: string }) =>
        <>
            <li className="ql-item ql-tree-branch"><a href={props.link}>{props.name}</a></li>
        </>

    render = () =>
        <>
            <div className="ql-container">

                <When condition={this.state.collapsed}>
                    <QLButton title={this.props.title} action={this.collapse} />
                </When>

                <When condition={!this.state.collapsed}>
                    <this.QuickLinkExpanded />
                </When>

            </div>
        </>
}

export default class QLButton
    extends React.Component<Props> {

    state: State;
    animationRef: React.RefObject<HTMLElement>
    constructor(props: Props) {
        super(props);
        this.animationRef = React.createRef();
        this.state = {
            title: props.title,
            animating: false
        }
    }

    render(): React.ReactElement {
        return <>
            <button onClick={this.onClick} className="ql-btn clickable">

                <When condition={this.state.animating}>
                    <div className="ql-typing-text">
                        {"exec tree ./"}
                        <span className="ql-cursor" ref={this.animationRef} />
                    </div>
                </When>

                <div className="ql-title-text">
                    {this.state.title}
                </div>

                <When condition={!this.state.animating}>
                    <div className="ql-btn-icon">
                        <FontAwesomeIcon icon={faChevronDown} />
                    </div>
                </When>

            </button>
        </>
    }

    private onClick = (): void => {
        if (this.state.animating) return;
        this.setState({ animating: !this.state.animating }, this.openQuicklinks);
    }

    private openQuicklinks = (): void => {
        anime.timeline()
            .add({
                targets: this.animationRef.current,
                translateX: [...Array(9)].map((_, i) => ({
                    value: ((i + 1) * 0.57) + "em",
                    duration: 100,
                })),
                easing: "easeInOutBack",
            })
            .add({
                targets: this.animationRef.current,
                duration: 700,
                opacity: [
                    { value: [1, 1] },
                    { value: [0, 0] },
                    { value: [1, 1] },
                    { value: [0, 0] }
                ],
            }).finished.then(() => {
                this.props.action(); // This call goes to the Quicklinks parent
            })
    }
}

阅读相关文章，我测试了导入不正确（它们看起来都很好），我删除了 package_lock.json 并刷新了它，并且弄乱了跟踪点所在的行和周围代码.

Answer 1

有人建议我将 QuicklinkExpanded 和 Item 移到 Quicklinks class 之外。这实际上解决了生产中的崩溃问题。我不确定为什么，这可能是 react 和 ts 编译为 js 的错误。

setState 仅在生产构建时引发 Minified React 错误 #130

setState provokes Minified React error #130 only on production build

typescript

reactjs

netlify