Question

我想我在这里误解了一些东西。

我有一个孩子接收1）一个布尔值来通知父母的提交事件，以及2）回调以在提交事件发生时发送信息

list_ = []

    if os.path.exists(csvfile):
        df = pd.read_csv(csvfile, sep=',', encoding='utf-8')            list_.append(pd.concat(df))

frame = pd.concat(list_,ignore_index=True)



df1 = 
  Apple Banana 
0 1     7
1 2     10
2 4     5
3 5     1
4 7     5

df2 =

  Apple Banana Carrot
0 1     7       5
1 2     10      8
2 4     5       8 
3 5     1       2
4 7     5       1


df3 =

 Apple Carrot Mango
0 1       5      2
1 2       8      3
2 4       8      7
3 5       2      1
4 7       1      5


result_df = 

  Apple Banana  Carrot Mango
0  1     7        n.a   n.a   
1  2     10       n.a   n.a
2  4     5        n.a   n.a
3  5     1        n.a   n.a
4  7     5        n.a   n.a
5  1     7        5     n.a
6  2     10       8     n.a
7  4     5        8     n.a
8  5     1        2     n.a
9  7     5        1     n.a
10 1     n.a       5      2
11 2     n.a       8      3
12 4     n.a       8      7
13 5     n.a       2      1
14 7     n.a       1      5

当父提交事件触发时：

<VariationForm      
    isSubmitting={this.state.isSubmitting}
    submittingHandler={this.receiveChildFormSubmit}
/>;

子组件将接收这个新的submitForm = () => { this.setState({isSubmitting: true}) }状态，触发将'子表单'数据传递给父级的回调。

isSubmitting

子组件侦听要更改的// in the parent receiveChildFormSubmit = (formData) => { this.setState({product_variations: formData}) }个状态，此时它将从isSubmitting传递相关数据。

componentWillReceiveProps

我认为这可能是一个反模式，但表单中的子部分是这种行为的重要部分，我想将它们分开。

问题是，我得到了componentWillReceiveProps = (nextProps) => { if (nextProps.isSubmitting) this.props.submittingHandler(this.state.product_variations)

听起来可能是这样一个事实，即处理程序由其父级的状态变化触发，然后改变其父级的状态，导致另一个触发器，产生无限循环。

我不明白的是，这个回调更改Uncaught Error: Maximum update depth exceeded.的状态永远不会传递给product_variations，为什么它会再次传递道具？

如何防止这种循环情况？

Answer 1

在您的子组件componentWillReceiveProps中，您似乎正在调用更新状态的父函数，并在父级中重新呈现，导致子组件componentWillReceiveProps再次被调用，从而进入循环

您需要在子组件componentWillReceiveProps中添加一个支票，例如

componentWillReceiveProps = (nextProps) => {
        if ((nextProps.isSubmitting !== this.props.isSubmitting) && nextProps.isSubmitting)
            this.props.submittingHandler(this.state.product_variations)
         }
}

Answer 2

在您的childComponent中，您正在检查＆＃34;是否正在提交＆＃34;是的，那么你正在调用parentHanlder。在ParentHandler中，你正在改变另一个属性的状态，但是这个状态改变仍然会导致你的父改变渲染，并重新渲染childComponent，你再次检查＆＃34; isSubmitting＆＃34;由于最后一次setState调用仍然为true的值因此它有点形成一个循环。

因此，在你的＆＃34; componentWillReceiveProps＆＃34;你需要检查一下你收到的这些道具是否与你之前收到的道具有什么不同，如果是这样，那么只需要调用父处理程序。

componentWillReceiveProps = (nextProps) => {
        if ((nextProps.isSubmitting !== this.props.isSubmitting) && nextProps.isSubmitting)
            this.props.submittingHandler(this.state.product_variations)
         }
}

React - 更改与组件无关的状态会触发最大更新深度错误

2 个答案: