使用onClick不斷渲染React組件

Question

我希望result.js中按鈕的onClick事件呈現我的Spinner組件，並且到目前為止（有點）能做到這一點。 目前，Spinner大多具有一些console.log（）語句，並且它始終記錄“ Rendered spinner”。 單擊按鈕后，無休止地大約每秒一次。 為了記錄，沒有顯示返回的段落，但是我還沒有調試它。 另外，我在Result.js中排除了一些我認為不相關的代碼。

現在，我只希望Spinner在按下按鈕后僅渲染一次。 有小費嗎？

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);

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;

Answer 1

您可以添加處理程序方法以更新微調器的狀態

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

並且在您的渲染中它將需要作為道具傳遞

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

在微調器組件返回中，您可以使用onclick觸發此操作

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

這將允許您更新父級中的狀態。您可能想弄清楚如何在微調器中一次顯示一個項目，並且僅在沒有剩余項目可顯示時將狀態設置為false。

對不起，如果我誤解了您的評論。