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

Question

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

我已经调试了堆栈跟踪的每一部分，并从Quicklinks类中的collapse函数跟踪到setState方法。这在QLButton类中被调用，它是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类。这实际上解决了生产中的崩溃问题。我不知道为什么，这可能是react和ts编译成js的错误。