账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react mobx 其他组件无法响应当前组件的action事件
    36
    0

    我点击按钮,去更新store里的状态,组件一能响应变化,组件二就无法响应变化了,为什么?

    1.component one

    @inject("store")
    @observer
    class MyComponentOne extends React.Component{
        constructor (props){
            super(props);
            console.log(this.props,"props");
            this.test = this.test.bind(this);
        }
        render() {
            console.log(‘render in one’);
            return (
                <div>
                    <button onClick={this.test}>click to update</button>
                    1111{this.props.store.user.name}111
                </div>
            );
        }
        test(){
            let u = {
                name:’my new name'
            }
            this.props.store.updateUser(u);
        }
    };

    2.component two

    @inject("store")
    @observer
    class MyComponentTwo extends React.Component{
        constructor (props){
            super(props);
            console.log(this.props,"props");
        }
        render() {
            console.log(‘render in two’);
            return (
                <div>
                    222{this.props.store.user.name}222
                </div>
            );
        }
    };

    3.store.js

    class StoreClass{
      @observable
      user = {
        name:’my old name',
      };
      @action.bound
      updateUser(newUser){
        this.user = Object.assign(this.user,newUser);
      }
    }

    4._app.js (use in nextjs)

    class Home extends App {
    
      state = {
        store: new Store(),
      }
    
      render () {
        const { Component, pageProps } = this.props;
        return (
          <Provider store={this.state.store}>
            <Component {...pageProps} />
          </Provider>
        )
      }
    }
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • ╰°放开那萌比o- 普通会员 1楼

      在React中,我们可以使用MobX(Model-View-Controller)库来管理组件的状态。但是,MobX本身并不直接支持所有组件无法响应当前组件的action事件。要解决这个问题,你需要使用React的生态系统,如Redux、MobX,或者使用React Hooks(Hook是React提供的一个特殊组件,它允许我们在函数组件中使用props,而不是依赖组件的state和生命周期方法)。

      例如,如果你想在一个状态管理组件中使用Redux,你可以在其中添加一个useEffect钩子,用于监听action事件。然后在action中添加一个useEffect钩子,用于更新组件的状态。

      以下是一个简单的例子:

      ```jsx import { useEffect } from 'react'; import { createStore, applyMiddleware } from 'redux'; import { Provider } from 'react-redux'; import reducer from './reducer';

      const store = createStore(reducer, applyMiddleware());

      function App() { useEffect(() => { // 在这里添加action事件监听 // ... }, []);

      return ( {/ 这里是你的组件代码 /} ); }

      export default App; ```

      在这个例子中,我们在useEffect钩子中添加了一个action事件监听。在action中,我们可以使用useEffect钩子来更新组件的状态。

      如果你需要使用React Hooks,你可以这样做:

      ```jsx import { useState } from 'react';

      function App() { const [count, setCount] = useState(0);

      useEffect(() => { // 在这里添加action事件监听 // ... }, []);

      return (

      ); }

      export default App; ```

      在这个例子中,我们在useEffect钩子中添加了一个action事件监听。在action中,我们可以使用useState钩子来更新组件的状态。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部