react-countdown-now时间到后如何隐藏元素

Question

我正在尝试通过 ReactJs 创建一个投标网站，这就是问题所在。 我希望时间倒计时完成后输入表单会隐藏（npm react-countdown-now）

1.我尝试 setState True or False {this.state.showForm && } 但倒计时完成后它不起作用并出现错误

import React, { Component } from 'react'
import Countdown from 'react-countdown-now';

class Pricebidding extends Component {
  constructor(props) {
     super(props)
     this.state = {
       showForm: true,
     }
     this.renderer = this.renderer.bind(this);
  }

  renderer({ days, hours, minutes, seconds, completed}) {

    if (completed) {
        this.setState({ showForm: false })
        return <span>Time up</span>
    } else {
         this.setState({ showForm: true})   
        return 
        <span>{days}days{hours}hours{minutes}mins{seconds}secs</span>
    }
  }

  render()
     return (
        <div>
            <Countdown date={this.props.endtime} renderer={this.renderer}/>
            {this.state.showForm && <form>
                <input></input>
                <button type="submit">Bid</button>
                <span>{this.state.bidprompt}</span>
            </form> }
        </div>
    );
  }
}

未捕获的不变违规：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

Answer 1

您正在无限循环，因为您正在无限更新状态，

渲染器 -> setState -> 渲染器 -> setState -> ...

您可以通过在CountDown 组件中渲染form 来解决此问题

class Pricebidding extends Component {
   constructor(props) {
     super(props);
     this.state = {
       bidprompt: '...'
     };
     this.renderer = this.renderer.bind(this);
   }

   renderer({ days, hours, minutes, seconds, completed}) {
    if (completed) {
       return <span>Time up</span>;
    } else {
      return (
       <>
          <span>{days}days{hours}hours{minutes}mins{seconds}secs</span>
          <form>
            <input></input>
            <button type="submit">Bid</button>
            <span>{this.state.bidprompt}</span>
         </form>
       </>
      );
    }
  }

  render()
    return (
        <Countdown 
           date={this.props.endtime} 
           renderer={this.renderer}
        />
    );
  }
}

如果你想在你的组件中保持一个状态，你可以使用onComplete property

class Pricebidding extends Component {
   constructor(props) {
     super(props);
     this.state = {
       showForm: true,
     };
     this.handleComplete = this.handleComplete.bind(this);
   }

   handleComplete() {
      this.setState({ showForm: false });
   }

   renderer({ days, hours, minutes, seconds, completed}) {
    if (completed) {
       return <span>Time up</span>;
    } else {
      return <span>{days}days{hours}hours{minutes}mins{seconds}secs</span>;
    }
  }

  render()
    return (
      <div>
        <Countdown 
           date={this.props.endtime} 
           renderer={this.renderer}
           onComplete={this.handleComplete}
         />
         {this.state.showForm && (
           <form>
             <input></input>
             <button type="submit">Bid</button>
             <span>{this.state.bidprompt}</span>
           </form> 
        )}
      </div>
    );
  }
}