React.js在循环内更新状态并延迟

时间:2017-01-01 23:37:18

标签: reactjs

我对React很新,我正在尝试制造鼓机。我完全陷入困境。我试图循环遍历一个单元格数组并将布尔值更新为true但我试图在每个状态更新之间有两秒钟的延迟。当我单击按钮时,它会在延迟2秒后更新整个阵列。我已经阅读了一些关于如何使用循环设置超时但我似乎无法使其工作的内容。任何想法都是???

enter code here
1-02 21:17:50.269 2957-2957/com.example.abbkr.android2k17_proj E/AndroidRuntime: FATAL EXCEPTION: main
                                                                          android.content.res.Resources$NotFoundException: String resource ID #0x1
                                                                              at android.content.res.Resources.getText(Resources.java:229)
                                                                              at android.support.v7.widget.ResourcesWrapper.getText(ResourcesWrapper.java:52)
                                                                              at android.widget.TextView.setText(TextView.java:3620)
                                                                              at com.example.abbkr.android2k17_proj.CustomAdapter.SuerveryAdapter.getView(SuerveryAdapter.java:110)
                                                                              at android.widget.AbsListView.obtainView(AbsListView.java:2267)
                                                                              at android.widget.ListView.makeAndAddView(ListView.java:1769)
                                                                              at android.widget.ListView.fillDown(ListView.java:672)
                                                                              at android.widget.ListView.fillFromTop(ListView.java:733)
                                                                              at android.widget.ListView.layoutChildren(ListView.java:1622)
                                                                              at android.widget.AbsListView.onLayout(AbsListView.java:2102)
                                                                              at android.view.View.layout(View.java:13754)
                                                                              at android.view.ViewGroup.layout(ViewGroup.java:4362)
                                                                              at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1649)
                                                                              at android.widget.LinearLayout.layoutHorizontal(LinearLayout.java:1638)
                                                                              at android.widget.LinearLayout.onLayout(LinearLayout.java:1422)
                                                                              at android.view.View.layout(View.java:13754)
                                                                              at android.view.ViewGroup.layout(ViewGroup.java:4362)
                                                                              at android.widget.FrameLayout.onLayout(FrameLayout.java:448)
                                                                              at android.view.View.layout(View.java:13754)
                                                                              at android.view.ViewGroup.layout(ViewGroup.java:4362)
                                                                              at android.support.v7.widget.ActionBarOverlayLayout.onLayout(ActionBarOverlayLayout.java:433)
                                                                              at android.view.View.layout(View.java:13754)
                                                                              at android.view.ViewGroup.layout(ViewGroup.java:4362)
                                                                              at android.widget.FrameLayout.onLayout(FrameLayout.java:448)
                                                                              at android.view.View.layout(View.java:13754)
                                                                              at android.view.ViewGroup.layout(ViewGroup.java:4362)
                                                                              at android.widget.LinearLayout.setChildFrame(LinearLayout.java:1649)
                                                                              at android.widget.LinearLayout.layoutVertical(LinearLayout.java:1507)
                                                                              at android.widget.LinearLayout.onLayout(LinearLayout.java:1420)
                                                                              at android.view.View.layout(View.java:13754)
                                                                              at android.view.ViewGroup.layout(ViewGroup.java:4362)
                                                                              at android.widget.FrameLayout.onLayout(FrameLayout.java:448)
                                                                              at android.view.View.layout(View.java:13754)
                                                                              at android.view.ViewGroup.layout(ViewGroup.java:4362)
                                                                              at android.view.ViewRootImpl.performLayout(ViewRootImpl.java:1866)
                                                                              at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1687)
                                                                              at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:998)
                                                                              at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:4212)
                                                                              at android.view.Choreographer$CallbackRecord.run(Choreographer.java:725)
                                                                              at android.view.Choreographer.doCallbacks(Choreographer.java:555)
                                                                              at android.view.Choreographer.doFrame(Choreographer.java:525)
                                                                              at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:711)
                                                                              at android.os.Handler.handleCallback(Handler.java:615)
                                                                              at android.os.Handler.dispatchMessage(Handler.java:92)
                                                                              at android.os.Looper.loop(Looper.java:137)
                                                                              at android.app.ActivityThread.main(ActivityThread.java:4745)
                                                                              at java.lang.reflect.Method.invokeNative(Native Method)
                                                                              at java.lang.reflect.Method.invoke(Method.java:511)
                                                                              at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:786)
                                                                              at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
                                                                              at dalvik

这是Row组件。提前谢谢!

1 个答案:

答案 0 :(得分:0)

必须使用setState来设置状态,并且在计时器回调的上下文中不再存在对状态的访问。您还要为每个单元格创建单独的延迟间隔。将状态设置为单个延迟函数会更好。

这是未经测试的,但应指向正确的方向。请注意,数组切片会复制已修改的数组,然后我们使用setState来更新单元格。

import React from 'react'

class Row extends React.Component{
  constructor(props){
    super(props)
    this.tick = this.tick.bind(this);
    this.delay = this.delay.bind(this);
    this.state = {
      cells: this.props.cell
    }
  }

  tick(){
      this.delay(this.state.cells);
  }

  delay(cells){
    var that = this;
    setInterval(() => {
       var newCellState = cells.map((cell) => { 
          cell.playing = true
        }); 
       that.setState({cells: newCellSate});
    },2000)
  }

  render(){
    return(
      <div>
        <div>hello</div>
        <button onClick={this.tick}>Click </button>
      </div>
    )
  }
}

export default Row;