小编Mar*_*tin的帖子

我需要迁移MobX v.5到MobX v6+支持 React hooks 的版本，但是升级到之后MobX v6+出现此错误，[MobX] Cannot obtain atom from undefined我能够追踪到当我想使用 来创建 Lazy observable 时onBecomeObserved，由于某种原因这会抛出上面的错误，但我无法弄清楚是什么原因导致的。

我使用 MobX 提供的注入将组件连接到存储，它可能不再是一个好的模式，但它对我来说是从旧的MobX. withTheme功能是Material-UI连接到主题系统

export function injector<T>(target: T): T {
  return inject('data', 'view')(withTheme(target));
}

export function storeConnect<T extends IReactComponent>(target: T): T {
  return injector(observer(target));
}

这是我创建惰性可观察的基础存储，它应该负责从 API 加载数据，但是我的应用程序崩溃了，无法找到解决方案。

abstract class BaseProvider {
  @observable state = "NONE";

  constructor() {
    //this it throws error
    onBecomeObserved(this, "isLoading", this.loadData);
  }

  public abstract loadData(): …

假设我有我想要函数的组件，它应该返回一些基于我在filterTypesArray. 然后我想{generateInputs}在我的班级中使用返回函数来渲染它。它向我发出标题警告。为了避免这种情况，我必须在render函数中实现这种类型的逻辑作为 some const。我是新来的反应，我不完全明白为什么会这样。从那条警告信息来看，我并不聪明。

有人能解释一下为什么它会抛出警告信息吗？

import * as React from "react";

interface IGridFilter {
    filterTypesArray: any[];
}

type GridFilterProps = IGridFilter;

export default class GridFilter extends React.PureComponent<GridFilterProps, {}>{
    constructor(props) {
        super(props)
    }

//here I want to do some logic and return some "DOM elements"
generateInputs = () => {
    return (
        <div> TEST </div>
    );
}
render() {
    //to avoid warning message I have to 
    //const generateInputs = this.props.filterTypesArray.map((input) =>
    //    <div>test</div>
    //); …

我有视图组件，其中必须导入多个组件。这些组件将根据某些特定条件进行渲染。它应该如何工作，就是页面上有3个按钮，例如，当我单击第一个按钮（文件上传）后，我需要在<FileImport>下方渲染组件。在renderImportAttributes功能上应呈现什么组件。但这给我一个警告

警告：函数作为React子元素无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。

这到底有什么问题？

export default class ImportView extends React.PureComponent<ModelYearListProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            selectedImportOption: null
        }
    }

    private selectImportOption(option: string): any {
        this.setState(prevState => ({
            selectedImportOption: option,
        }));
    }

    private renderImportAttributes(): JSX.Element {
        if (this.state.selectedImportOption === FILE_IMPORT) {
            return <FileImport history={this.props.history} importerId={this.props.match.params.importerId} />;
        }
        else if (this.state.selectedImportOption === SPIDER_IMPORT) {
           //another component
        }
        else if (this.state.selectedImportOption === URL_IMPORT) {
           //another component
        }
        return null;
    }

    render() {
        return (
            <div className="overView">
                <Button …