问题

this.times 是仅更新状态的函数，它不返回任何可渲染的JSX。

times = () => {
  this.setState((previousState) => ({
    myArray: [...previousState.myArray, this.state.milliSecondsElapsed]
  }));
};

解

1. 创建myArray状态。

   this.state = {
     myArray: [], // <-- add initial empty array
     milliSecondsElapsed: 0,
     timerInProgress: false // state to detect whether timer has started
   };
   

2. 将状态更新逻辑从this.times移到this.handleStop。

   handleStop = () => {
     this.setState(
       (previousState) => ({
         timerInProgress: false,
         myArray: [
           ...previousState.myArray, // <-- shallow copy existing data
           this.state.milliSecondsElapsed / 100 // <-- add new time
         ]
       }),
       () => {
         clearInterval(this.timer);
         this.startBtn.focus();
       }
     );
   };
   

3. 将经过时间数组呈现为逗号分隔的列表。

   <div>{this.state.myArray.join(", ")}</div>
   

完整代码

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myArray: [],
      milliSecondsElapsed: 0,
      timerInProgress: false // state to detect whether timer has started
    };
    this.updateState = this.updateState.bind(this);
    this.textInput = React.createRef();
  }

  componentDidMount() {
    window.addEventListener("keypress", this.keyPress);
  }

  componentWillUnmount() {
    window.removeEventListener("keypress", this.keyPress);
  }

  textInput = () => {
    clearInterval(this.timer);
  };

  updateState(e) {
    this.setState({ milliSecondsElapsed: e.target.milliSecondsElapsed });
  }

  keyPress = (e) => {
    if (e.keyCode === 32) {
      // some logic to assess stop/start of timer
      if (this.state.milliSecondsElapsed === 0) {
        this.startBtn.click();
      } else if (this.state.timerInProgress === false) {
        this.startBtn.click();
      } else {
        this.stopBtn.click();
      }
    }
  };

  handleStart = () => {
    if (this.state.timerInProgress === true) return;

    this.setState({
      milliSecondsElapsed: 0
    });
    this.timer = setInterval(() => {
      this.setState(
        {
          milliSecondsElapsed: this.state.milliSecondsElapsed + 1,
          timerInProgress: true
        },
        () => {
          this.stopBtn.focus();
        }
      );
    }, 10);
  };

  handleStop = () => {
    this.setState(
      (previousState) => ({
        timerInProgress: false,
        myArray: [
          ...previousState.myArray,
          this.state.milliSecondsElapsed / 100
        ]
      }),
      () => {
        clearInterval(this.timer);
        this.startBtn.focus();
      }
    );
  };

  render() {
    return (
      <div>
        <div className="index" align="center">
          <input
            value={this.state.milliSecondsElapsed / 100}
            onChange={this.updateState}
            ref={this.textInput}
            readOnly={true}
          />
          <button
            onClick={this.handleStart}
            ref={(ref) => (this.startBtn = ref)}
          >
            START
          </button>
          <button onClick={this.handleStop} ref={(ref) => (this.stopBtn = ref)}>
            STOP
          </button>
          <h1>{this.state.milliSecondsElapsed / 100}</h1>
        </div>
        <div>{this.state.myArray.join(", ")}</div>
      </div>
    );
  }
}