通过 props 传递一个函数来编辑从类组件到基于函数的组件的状态不起作用

Question

我有一个反应前端，我的大部分组件都是基于类的组件，但碰巧这些类组件中的一个组件必须是功能组件，所以我目前有一个基于类的功能组件组件。

在功能组件内部，我有一个触发 fetch 调用的按钮。在这个 fetch 调用完成后，我希望更新基于类的（父）组件的状态。

我的方法是在基于类的组件（称为 setSubscriptoin）中创建一个函数来调整基于类的组件的状态，然后通过 props 将该函数传递给函数式组件，并在之后使用 .then 承诺调用该函数fetch 调用。

但是，似乎当我通过道具传递函数时，功能组件甚至无法检测到该函数，并且出现此错误： Uncaught (in promise) TypeError: e.setSubscription is not a function.

这里是重要的代码：

基于类的组件：

class OuterComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {subscription: {}}
    }

    setSubscription(subscription) {
        this.setState({subscription: subscription})
    }

    render() {
        return(
            <Elements>
                <FunctionComponent setSubscription={this.setSubscription.bind(this)}></FunctionComponent>
            </Elements>
        )
    }
}

我想包括元素部分，因为我不确定这是否会影响它。 FunctionComponent 包装在 Stripe Elements 提供程序中。不知道为什么会这样做，但我想我应该包括它以防万一。

功能组件：

const FunctionComponent = (props) => {
    const fetchSomething = () => {
        fetch('fetch is made here and is successful')
        .then(response => {
            if (some_condition) {
                props.setSubscription({value1: 1, value2: 2}))
            }
        } 
    }
} 

问题在于函数组件甚至无法将 props.setSubscription 识别为函数（如错误所示）。

我已经尝试在控制台记录 props 变量，它实际上有 setSubscription 函数，所以我不知道问题可能是什么。我一直试图弄清楚这一点，我完全被难住了。有谁知道为什么会发生这个错误？

Answer 1

then 应该有一个回调试试这个：

const FunctionComponent = (props) => {
    const fetchSomething = () => {
        fetch('fetch is made here and is successful')
        .then(()=>props.setSubscription({value1: 1, value2: 2}))  
    }
}