通过不起作用的道具将要编辑状态的函数从类组件传递到基于函数的组件

Question

我有一个react前端，我的大多数组件都是基于类的组件，但碰巧这些类组件中的一个组件必须是功能组件，所以我目前有一个带有基于类组件的功能组件。

在功能组件中，我有一个按钮，可以触发fetch调用。在这个获取调用完成后，我希望更新基于类的(父(组件的状态。

我的方法是在基于类的组件中生成一个函数(称为setSubscribetin(，用于调整基于类组件的状态，然后通过props将该函数传递给功能组件，并在fetch调用后使用.then promise调用该函数。

然而，当我通过道具传递函数时，函数组件甚至无法检测到函数，我得到了这个错误：CCD_ 1。

这是重要的代码：

基于类的组件：

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封装在StripeElements提供程序中。我不知道为什么这会有什么作用，但我想我应该把它包括在内，以防万一。

功能组件：

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}))  
}
}