Question

遵循Flux模式我尝试更新我的组件并通过商店传递一些值（在这种特定情况下为字符串和布尔值）。

我找不到任何非hacky方法来解决这个问题，即在Store中使用全局变量并在Store中使用getter函数，该函数从ComponentWillMount（）上的组件调用，而不是一个很好的解决方案。

这是一个精简代码示例，展示了我想要实现的目标：

ExampleStore.js

@client.command(...)
@commands.has_permissions(kick_members=True)
async def kick(ctx, ...):
    pass

正如上面评论中所提到的，到目前为止，我眼中最好的解决方案是在商店中调用组件中的函数，即component.receiveUpdateFromStore（param）;然后更新该函数中的组件状态，但即使它们似乎正确地导入/导出，它仍然是返回receiveUpdateFromStore未定义。

任何其他想法如何解决这个问题表示赞赏。

//示例组件

import AppDispatcher from '../appDispatcher.jsx';
var displayimportError = false;
var importedID = '';
import axios from 'axios';

class ExampleStore extends EventEmitter {
  constructor() {
    super();
  }



importId(id) {
    let self = this;

    // fetch data from BE
    axios.get('foo.com').then(function(response) {
        if (response.data && response.data.favoriteEntries) {
            displayimportError = false;
        }
        self.emitChange();
    }).catch(function(error) {
        console.log(error);
        displayimportError = true;
        importedID = id;
        self.emitChange();
        // now update component and pass displayimportError and 
        // importedID.
        // best would to component.receiveUpdateFromStore(param); but 
        // it's giving receiveUpdateFromStore is not function back
      });

   }

}

var favObj = new ExampleStore();

AppDispatcher.register(function(payload) {
  var action = payload.action;
  switch (action.actionType) {
    case 'UPDATE_ID':
        favObj.importId(action.data);
        break;
}

return true;
});

export default favObj;

知道如何将数据从商店传递到组件并以一种很好的方式更新组件状态吗？

Answer 1

我会将商店状态挂起在商店类实例本身 - 类似于this.state.displayimportError = true - 然后让组件订阅商店：

import React from 'react';
import ExampleStore from '../stores/ExampleStore.jsx';

class ExampleComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      importError: ExampleStore.state.displayimportError,
    };
  }

  componentWillMount() {
    ExampleStore.on( 'change', this.updateState );
  }

  componentWillUnmount() {
    ExampleStore.removeListener( 'change', this.updateState ); 
  }

  updateState = () => {
    this.setState( state => ({
      importError: ExampleStore.state.displayimportError,
    })
  }

  render() {
    return <div>{ this.state.importError }</div>
  }
}

注意：上面的代码未经测试，并且还使用类属性/方法来绑定updateState。

按照通量模式以干净的方式将来自react.js存储的数据传递给Component

1 个答案: