如何将阵列中的项目与状态进行比较，以及如何在渲染后渲染这些项目

Question

OnMouseDown它显示数组中的所有项目。我不要！

我很确定.map不是我想要的，也许数组对象的设置不正确？实际上，我提取了OnSubmit并将其重构为一个类，但是我认为这是不必要的。

不幸的是，在这种情况下，我必须提供所有代码：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

const ms = require('pretty-ms');

class Timer extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      time: 0,
      start: 0,
      isOn: false, 
      submit: false,
      scoreArray: []

    }
    this.onItemMouseDown = this.onItemMouseDown.bind(this);
    this.onItemMouseUp = this.onItemMouseUp.bind(this);
    this.resetTimer = this.resetTimer.bind(this);
    this.onSubmit = this.onSubmit.bind(this);

  }

  onItemMouseDown() {
    this.setState({
      time: this.state.time,
      start: Date.now() - this.state.time,
      isOn: true
    })

    //the below uses a predefined function setInterval with a nested arrow function setting the state again 
    // which is time. More detail: It compares the time to the current date and time for accuracy. The interval is 1.
    this.timer = setInterval(() => this.setState({
      time: Date.now() - this.state.start
    }), 1);
    console.log(this.state.time) 

  }

  onItemMouseUp() {
    this.setState({isOn: false});
    clearInterval(this.timer);  
    console.log(this.state.time) 
  }

  resetTimer() {
    this.setState({
      time: 0,
      submit: false
    })
  }

  onSubmit() { 
    this.setState({scoreArray: this.state.scoreArray.concat(ms(this.state.time, {verbose: true}))})

    console.log(this.state.time)

    this.setState({
      time: 0,
      submit: true
    })

    console.log(this.state.submit)
}

  render() {

    if((this.state.isOn) === true){
    return(
      <React.Fragment>
      <div>
        <h3>Timer: {ms(this.state.time, {verbose: true})} </h3>

      </div>
    <div>
      <button onMouseDown={this.onItemMouseDown} onMouseUp={this.onItemMouseUp}>start</button>    

      </div>
      <div>
        <ul>
          {this.state.scoreArray.map(function(item, i){
            return <li key={i}>{item}</li>
          })}
        </ul>
      </div>
      <div>
        <OnSubmit time={this.state.time} sampleInfo={sampleInfo}/>
      </div>
      </React.Fragment>
    ) 

    } else if ((this.state.isOn) === false){  

      return(
        <React.Fragment>
      <div>
        <h3>Timer: {ms(this.state.time)}</h3>
      </div>
      <div>
      <button onMouseDown={this.onItemMouseDown} onMouseUp={this.onItemMouseUp}>Start</button><span></span>  

      <button onClick={this.resetTimer}>Reset</button> <span></span>

      <button onClick={this.onSubmit} >Done!</button>
      </div>       
      <div>
        <ul>
          {this.state.scoreArray.map(function(item, i){
            return <li key={i}>{item}</li>
          })}
        </ul>
      </div> 
      </React.Fragment>
      )
    } 
  }   
} 

class OnSubmit extends React.Component {


 render(){
  if(this.props.time >= 1000 && this.props.time < 2000) {
    return(
       sampleInfo.map((thing) =>
      <div key={thing.second}>
       <h4>{thing.animal[0]}</h4>
      </div>
       )
    )
  } else if 
    (this.props.time > 2000) {
   return(
    sampleInfo.map((thing) =>
    <div key={thing.second}>
     <h4>{thing.animal[1]}</h4>
    </div>
      )
   )
    }
    return(
      <div>Keep it going</div>
    )
  }
}

 const sampleInfo = [

      {
  second: 1,
  ml: '19ml',
  animal: 'Thing1',
  weight: '4kg',
  capacity: '20ml'
      },
      {
  second: 2,
  ml: '38ml',
  animal: 'Thing2',
  weight: '7kg',
  capacity: '35ml'
      },
      {
  second: 3,
  ml: '57ml',
  animal: 'Thing3',
  weight: '12kg',
  capacity: '60ml'
      }
           ]

export default Timer

  const rootElement = document.getElementById("root");
ReactDOM.render(<Timer />, rootElement);

我只想显示this.props.time与之比较的数组中的第1个项目，例如如果时间> = 1000 && this.props.time <2000，则仅显示动物：“ Thing1”。