我对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组件。提前谢谢!
答案 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;