javascript - 多行倒计时

Question

我正在使用 map reactjs处理多行的倒计时

我倒计时了 1 小时，但我不知道如何对多行执行此操作

这是我的代码

class Example extends React.Component {
constructor() {
  super();
  this.state = { 
    time: {},
   seconds: 3600,
   data: [
     { "id": 1, "car": 'Audi 2018' }
   ]
   };
  this.timer = 0;
  this.startTimer = this.startTimer.bind(this);
  this.countDown = this.countDown.bind(this);
}

secondsToTime(secs){
  let hours = Math.floor(secs / (60 * 60));

  let divisor_for_minutes = secs % (60 * 60);
  let minutes = Math.floor(divisor_for_minutes / 60);

  let divisor_for_seconds = divisor_for_minutes % 60;
  let seconds = Math.ceil(divisor_for_seconds);

  let obj = {
    "h": hours,
    "m": minutes,
    "s": seconds
  };
  return obj;
}

componentDidMount() {
  let timeLeftVar = this.secondsToTime(this.state.seconds);
  this.setState({ time: timeLeftVar });
  this.startTimer()
}

startTimer() {
  if (this.timer == 0) {
    this.timer = setInterval(this.countDown, 1000);
  }
}

countDown() {
  // Remove one second, set state so a re-render happens.
  let seconds = this.state.seconds - 1;
  this.setState({
    time: this.secondsToTime(seconds),
    seconds: seconds,
  });

  // Check if we're at zero.
  if (seconds == 0) {
    clearInterval(this.timer);
  }
}
addCar = () =>{
  this.setState(prevState=>({
    data: [...prevState.data, { "id": 2, "car": 'New Car' }]
  }))
}

render() {
  return (
    <div>

  {this.state.data.map(row=>
  <ul key={row.id}>
          <li>car {row.car} <b>Finish:</b>h: {this.state.time.h}  m: {this.state.time.m} s: {this.state.time.s}</li>
    </ul>
  )}
  <button onClick={this.addCar}>Add Car</button>
    </div>
  );
}
}


ReactDOM.render(<Example/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

代码仅显示一行，而不是所有行

Answer 1

你需要用他自己的状态来扩展你的内部组件:

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      time: {},
      seconds: 3600
    };
    this.timer = 0;
    this.startTimer = this.startTimer.bind(this);
    this.countDown = this.countDown.bind(this);
  }

  secondsToTime(secs){
    let hours = Math.floor(secs / (60 * 60));
    let divisor_for_minutes = secs % (60 * 60);
    let minutes = Math.floor(divisor_for_minutes / 60);
    let divisor_for_seconds = divisor_for_minutes % 60;
    let seconds = Math.ceil(divisor_for_seconds);

    let obj = {
      "h": hours,
      "m": minutes,
      "s": seconds
    };
    return obj;
  }

  componentDidMount() {
    let timeLeftVar = this.secondsToTime(this.state.seconds);
    this.setState({ time: timeLeftVar });
    this.startTimer()
  }

  startTimer() {
    if (this.timer == 0) {
      this.timer = setInterval(this.countDown, 1000);
    } 
  }

  countDown() {
    // Remove one second, set state so a re-render happens.
    let seconds = this.state.seconds - 1;
    this.setState({
      time: this.secondsToTime(seconds),
      seconds: seconds,
    });

    // Check if we're at zero.
    if (seconds == 0) {
      clearInterval(this.timer);
    }
  }

  render() {
    return (
      <div>car {this.props.data.car} <b>Finish:</b>h: {this.state.time.h}  m: {this.state.time.m} s: {this.state.time.s}
    );
  }
}

class Example extends React.Component {    
  constructor(props) {
    super(props);
    this.state = {data: [{ "id": 1, "car": 'Audi 2018' }]};
  }

  addCar = () =>{
    this.setState(prevState=>({
      data: [...prevState.data, { "id": 2, "car": 'New Car' }]
    }))
  }

  render() {
    return (
      <div>
        <ul>
        {this.state.data.map(row => <MyComponent data={row} key={row.id}/>)}
        </ul>
        <button onClick={this.addCar}>Add Car</button>
      </div>
    );
  }
}