onChangeText中的Textinput setValue使“超出最大調用堆棧大小”

Question

我的視圖層次結構：

A extends Component {
   render(this.props.innerView())
}

B extends Component {
   render(
      <A innnerView={this._renderInnerView}/>
   )
}

而且我的innerView包含一個TextInput。

在Android中，我的TextInput如下：

<TextInput
                style={{flex: 1}}
                autoCapitalize='none'
                placeholder={strings.addLinkTitleHint}
                keyboardType='default'
                enablesReturnKeyAutomatically={true}
                autoCorrect={false}
                onChangeText={(text) => {
                    console.log("text : ", text);
                    if (this.state.modifyingTitle === text) {
                        return;
                    }
                    this.setState({
                        modifyingTitle: text
                    })
                }}
                underlineColorAndroid='rgba(0,0,0,0)'
                value={this.state.modifyingTitle}
            />

我只可以獲取一次日志信息，幾秒鍾后，出現“超出最大調用堆棧大小”錯誤。

我發現A中的render方法被調用了很多次，但是我不知道如何解決它。

Answer 1

這可能與將值綁定到狀態有關，並且setState是異步的（設置一條鏈，其中modifyingTitle永遠不等於text 。如果您的狀態是組件的本地狀態，則不必擔心）將輸入的值綁定到狀態，因為無論如何輸入的任何更改都應反映在狀態中（我想不出它可能不同步的一種方式）。