Question

我正在使用React v0.14.8。我试图从另一个组件调用fetchData函数。这是我的代码：

export default class TagUtils extends React.Component {
    deleteTag = () => {
        Tags.deleteTag(this.props.tag).then(function(response){
           if(response.message === 'tag successfully deleted')
                Sidebar.fetchData(); 
        });
    }
// other codes

和

export default class Sidebar extends React.Component {
fetchData() {
        Tags.getTags().done((response) => {
            this.setState({tags: response.tags || [], loaded: true});
        });
    }
//other codes

当我拨打deleteTag时，我在控制台中收到了此错误：

TypeError: _SidebarJsx2.default.fetchData is not a function

Answer 1

您无法致电Sidebar.fetchData，因为fetchData不是Sidebar的静态成员，而是实例会员。这意味着您需要Sidebar的实例来呼叫fetchData，例如new Sidebar().fetchData()。当然，这不是应该如何使用React组件，并且不在所有其他Sidebar实例上设置状态，因此它不会有意义。< / p>

您要做的是将回调传递给TagUtils组件：

export default class TagUtils extends React.Component {
    deleteTag = () => {
        Tags.deleteTag(this.props.tag).then((response) => {
           if(response.message === 'tag successfully deleted')
                this.props.onDeleteTag(); 
        });
    }
}

export default class Sidebar extends React.Component {
    fetchData() {
        Tags.getTags().done((response) => {
            this.setState({tags: response.tags || [], loaded: true});
        });
    }
    render() {
        return (
            { this.state.tags.map((tag) => 
                   <TagUtils tag={tag} onDeleteTag={this.fetchData} />) }
        );
    }
}

如果你必须通过几层可以正常的组件来回调这个回调，这在React中是典型的。但是，如果您发现自己通过许多看似不合适的组件层将道具传递给道具，或者尝试在应用程序中的大型水平空间内协调更改，则这是{{3}这样的主要用例。 }和Flux。

从另一个组件调用函数

1 个答案: