Question

我的反应组件出现了问题。基本上，当我进入倒计时页面时，表格不起作用（我的意思是它根本不起作用，我写的是例如123，这是2分3秒，没有任何反应，什么都没有）。但是，例如，如果我继续进入主页并返回倒计时页面，它就可以了。我注意到第一次进入此页面时，componentWillMount有效，但componentDidMount没有（它不会在console.log中显示消息）。链接到heroku：http://fathomless-lowlands-79063.herokuapp.com/?#/countdown?_k=mj1on6

CountdownForm.jsx

var React = require('react');
var CountdownForm = React.createClass({
  onSubmit: function (e) {
    e.preventDefault();
    var strSeconds = this.refs.seconds.value;
    if (strSeconds.match(/^[0-9]*$/)){
      this.refs.seconds.value = '';
      this.props.onSetCountdown(parseInt(strSeconds, 10));
    }

  },
  render: function () {
    return(
      <div>
      <form ref="form" onSubmit={this.onSubmit} className="countdown-form">
        <input type="text" placeholder="Enter time in seconds" ref="seconds" />
        <button className="button expanded">Start
        </button>
      </form>
    </div>
   );
   }
  });
  module.exports = CountdownForm;

Countdown.jsx

var React = require('react');
var Clock = require('Clock');
var CountdownForm = require('CountdownForm');
var Controls = require('Controls');

var Countdown = React.createClass({
  getInitialState: function () {
    return {
      count: 0,
      countdownStatus: 'stopped'
     };
  },
  componentDidUpdate: function (prevProps, prevState) {
    if (this.state.countdownStatus !== prevState.countdownStatus)
    {
      switch (this.state.countdownStatus){
          case 'started':
            this.startTimer();
            break;
            case 'stopped':
              this.setState({count: 0})
            case 'paused':
              clearInterval(this.timer)
              this.timer = undefined;
            break;
      }
    }
  },
  componentDidMount: function() {
    console.log("componentDidMount");
  },
  componentWillMount: function () {
    console.log("componentWillMount");
  },
  componentWillUnmount: function () {
    console.log('componentDidUnmount');
  },
  startTimer: function () {
      this.timer = setInterval(() => {
        var newCount = this.state.count - 1;
        this.setState({
          count: newCount >= 0 ? newCount : 0
        });
      }, 1000);
  },
  handleSetCountdown: function (seconds){
    this.setState({
      count: seconds,
      countdownStatus: 'started'
    });
  },
  handleStatusChange: function (newStatus) {
    this.setState({
      countdownStatus: newStatus
    });
  },
  render: function () {
    var {count, countdownStatus} = this.state;
    var renderControlArea = () => {
      if (countdownStatus !== 'stopped') {
      return <Controls countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange} />
      } else {
        return <CountdownForm onSetCountdown={this.handleSetCountdown} />
      }

    };
    return(
    <div>
      <Clock totalSeconds={count} />
      {renderControlArea()}
    </div>
  );
}
});
module.exports = Countdown;

Answer 1

我已经解决了这个问题。主要问题是错误：＆＃34;未捕获错误：无状态功能组件不能有引用。在不变的＆＃34; 。问题出在无状态组件上，这就是为什么我不使用Main.jsx和Nav.jsx中的箭头函数，而是使用了React.createClass（{}）。

反应组件没有安装

1 个答案: