Question

我有一种情况，我试图从放置在Window上的函数更新React / Redux状态。窗口上的函数无法访问React组件中的函数。知道如何在这种设置中绑定该功能吗？此代码段仅包含控制台日志，Redux调用将在该日志中进行。

class MyComponent extends Component {
  

  updateRedux = a => {
    console.log(a)
  }

  componentDidMount() {
    window.windowFunction = function(a) {
      this.updateRedux(a)
    }    
  }

  render() {
    return (
      <Stuff />
    )
  }

}

Answer 1

this在函数内部不可访问，您需要对其进行绑定。

尝试：

class MyComponent extends Component {

  updateRedux = a => {
    console.log(a)
  }

  componentDidMount() {
    window.windowFunction = function(a) {
      this.updateRedux(a)
    }.bind(this)
  }

  render() {
    return (
      <Stuff />
    )
  }

}

Answer 2

如果您想通过某些操作来更新Redux状态（这是通过设计来更新Redux状态的唯一方法），则需要使用connect（mapStateToProps，mapDispatchToProps ）（组件）

Answer 3

上面有关将windowFunction转换为箭头函数的评论之一解决了该问题。谢谢！

String Banner_Ads;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_basic);


    Firebase.setAndroidContext(this);
    BannerAds();


    View adContainer = findViewById(R.id.adMobView);
    AdView mAdView = new AdView(this);
    mAdView.setAdSize(AdSize.SMART_BANNER);
    mAdView.setAdUnitId(getString(Banner_Ads));
    ((RelativeLayout) adContainer).addView(mAdView);
    AdRequest adRequest = new AdRequest.Builder().build();
    mAdView.loadAd(adRequest);


}



public void BannerAds() {
    Firebase myFirebase = new Firebase("https://firebaseio.com/BannerAds");
    myFirebase.addValueEventListener(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot dataSnapshot) {
            Banner_Ads = dataSnapshot.getValue(String.class);


        }

        @Override
        public void onCancelled(FirebaseError firebaseError) {

        }
    });

}

Answer 4

您可以做的是使用演示者和连接的人来分离问题组件，使用react-redux。我假设您知道这个图书馆，请发表评论如果您需要更多详细信息。

// Simple "presenter", the getComponentData is used to get the data for the
// redux store.
class MyComponentPresenter extends Component {

  // returns data for redux
  getComponentData () {}

  componentDidMount() {
    this.props.updateRedux(this); // update Redux
  }

  render() {
    return (
      <Stuff />
    )
  }

}


// This component has the exact same interface, but comes with a updateRedux
// props which automatically dispatches an action
export const MyComponent = connect(null, {
  updateRedux(componentInstance) {
    return {
      type: "updateRedux"
    };
  }
});

// in the reducer
//
function reducer (state, action) {
  switch (action.type) {
    case "updateRedux":
      return ...
  }
}

不再需要全局可用的功能（在您的示例中，MyComponents的每个实例都被重新定义了，可能不是您想要的）。

从Window函数更新React / Redux状态

4 个答案: