Javascript 使用onClick无休止地重新渲染React组件

我想让result.js中按钮的onClick事件呈现我的微调器组件，到目前为止（某种程度上）已经让它这样做了。目前，Spinner主要有一些console.log（）语句，它会在单击按钮后无休止地记录“渲染的Spinner”，大约每秒记录一次。 作为记录，返回的段落没有显示，但我还没有开始调试它。此外，我还排除了Result.js中一些我认为不相关的代码

现在，我只希望微调器在按下按钮后只渲染一次。有什么建议吗

result.js：

import React, { Component } from "react";
import { connect } from "react-redux";
import Spinner from "./spinner";

class UnboxResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showSpinner: false
    };
    this.handleUnboxClicked = this.handleUnboxClicked.bind(this);
  }

  handleUnboxClicked(event) {
    event.preventDefault();
    console.log("Inside handleUnboxClicked");
    this.setState({
      showSpinner: true
    });
  }

  render() {

    return (
      <section className="opening">
        <div className="container">
          <div className="row">
            <button onClick={this.handleUnboxClicked}>UNBOX</button>
          </div>
          <div className="row">
            {this.state.showSpinner ?
              <Spinner items={this.props.unbox.items}/> :
              null}
          </div>
        </div>
      </section>
    );
  }
}

export default connect(state => ({
  unbox: state.unbox
}))(UnboxResult);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“/Spinner”导入微调器；
类UnboxResult扩展组件{
建造师（道具）{
超级（道具）；
此.state={
showSpinner:错误
};
this.handleUnboxClicked=this.handleUnboxClicked.bind（this）；
}
handleUnboxClicked（事件）{
event.preventDefault（）；
console.log（“内部handleUnboxClicked”）；
这是我的国家({
showSpinner：真的
});
}
render（）{
返回(
拆开
{this.state.showSpinner？
:
空}
);
}
}
导出默认连接（状态=>({
unbox:state.unbox
}))（结果）；

spinner.js：

import React, { Component } from 'react';

class Spinner extends Component {
  constructor(props) {
    console.log("Before super");
    super(props);
    console.log("Ran constructor.");
  }

  render(){
    console.log("Rendered spinner.");
    return(
    <p>Spinning..</p>
    );
  }
}
export default Spinner;

import React，{Component}来自'React'；
类微调器扩展组件{
建造师（道具）{
console.log（“超级之前”）；
超级（道具）；
log（“Ran构造函数”）；
}
render（）{
log（“渲染微调器”）；
返回(
旋转

);
}
}
导出默认微调器；

您可以添加一个处理程序方法来从微调器更新状态

handleClick(){
  this.setState({
    showSpinner: true
  })
}

在渲染中，它需要作为道具传递

<div className="row">
  {this.state.showSpinner ?
    <Spinner handleClick={this.handleClick}/> :
    null}
</div>

{this.state.showSpinner？
:
空}

在微调器组件返回中，可以使用onclick触发此操作

<button onClick = {this.props.handleClick} > Click </button>

点击

这将允许您更新父级中的状态，您可能希望了解如何在微调器中一次显示一个项目，并且仅在没有项目可显示时将状态设置为false

---

抱歉，如果我误解了您的评论。

什么是

items={this.props.unbox.items}

？移除它，您将获得预期的效果result@TheReason为什么这能解决问题呢？@其原因是简单地将特定的“道具”传递给微调器组件。我试着把它取下来，但没什么区别。它仍然无休止地记录消息。您正在显示的代码中没有任何东西会连续重新渲染微调器。我的猜测是，呈现

UnboxResult

的任何内容都在不断更新。我建议您调查导致组件不断重新渲染的原因。更多信息在这里两个组件看起来不错。您使用的是redux，因此可能是action或reducer中的某个问题。这就是为什么我建议删除

this.props.unbox.items

为什么

Spinner

需要

handleClick

道具？