Question

每当我点击四个选项中的正确或错误的“回答”div时，我都会尝试更新我的组件状态，以更新记分员和计数器。但是，当我控制台注销记分员和计数器值时，无论我回答了多少问题，我总是得到0。为什么会发生这种情况？如何更新这两个组件状态？

这是我的代码：

     public class UwLocalePolitieFragment extends Fragment implements GoogleApiClient.ConnectionCallbacks,
        GoogleApiClient.OnConnectionFailedListener,
        LocationListener {


    @Override
    public void onPause() {
        super.onPause();
        googleApiClient.stopAutoManage(getActivity());
        googleApiClient.disconnect();
    }


    private synchronized void setUpGClient() {
        googleApiClient = new GoogleApiClient.Builder(getActivity())
                .enableAutoManage(getActivity(), 0, this)
                .addConnectionCallbacks(this)
                .addOnConnectionFailedListener(this)
                .addApi(LocationServices.API)
                .build();
        googleApiClient.connect();
    }


    @Override
    public void onStart() {
        super.onStart();


        setUpGClient();
    }


}

Answer 1

设置状态是异步的，因此react可以通过将多个调用批处理到setState来进行一些性能优化。因此，依赖于先前状态值的状态更改（即用于递增计数器）应使用setState的函数版本 https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

您在调用setState后立即记录，但由于它是异步，您正在记录可能尚未设置实际的状态。您可以在回调中记录该值，保证在表面

下实际更新后运行状态

顺便说一下，如果答案是否正确，你的代码会完全相同，除非它增加而不是减少分数，所以我们可以把它干一点到一个setState，条件增量值

handleClickCont(choice) {
  this.setState(prevState => ({
      scorekeeper: prevState.scorekeeper + (choice === this.props.answer ? 1 : -1),
      counter: prevState.counter + 1,
      hideDiv: !prevState.hideDiv
    }),
    () => { // callback, guaranteed to have done your updates by this point
      console.log('scorekeeper ' + this.state.scorekeeper)
      console.log('counter ' + this.state.counter)
    }
  )
}

Answer 2

记住this.setState就像return语句。 setstate之后的所有语句可能都不会被执行。设置set后，除非指定不进行渲染，否则将调用组件的render方法。还有一些陈述可能无法执行。

handleClickCont(choice) {
    if(choice === this.props.answer) {
        this.setState({scorekeeper: this.state.scorekeeper + 1,counter: this.state.counter + 1,hideDiv: !this.state.hideDiv});
    } else{

    this.setState({scorekeeper: this.state.scorekeeper - 1,counter: this.state.counter + 1,hideDiv: !this.state.hideDiv});
    }

}

你也不能返回this.setState。调用它时也不总是执行setState。 react可能会批处理并稍后执行。

React：组件状态不更新记分员或计数器

2 个答案: