React Native TextInput 值不断刷新

Question

我把这些段落存储在一个数组中。然后，我将它们映射到我的应用程序上的显示按钮，其中每个按钮都保存着段落 ID。因此，当用户单击一个特定按钮时，它会将段落 id 传递给函数，以从数据库中获取数据并将其显示给 react 本机 TextInput。

我试图尽可能减少我的代码。所以这是我的代码中的样子：

constructor(props){
super(props);
this.state = {
open_parag: false, parag: [], update_parag_text: ''
}
}
async componentDidMount(){
const user_id = await AsyncStorage.getItem('user_id');
if(user_id){
this._loadEssayOutlineAttemptPreview(user_id);
}
}
_loadEssayOutlineAttemptPreview(user_id){
var outlineId = this.props.navigation.state.params.outlineId;
EssayOutlineController.loadEssayOutlineAttempt(user_id, outlineId).then(data=>{
if(data.status == true){
this.setState({
parag: data.outline_attempt.parag,
})
}
});
}
_getCurrentParag(parag_id){
EssayOutlineController.loadOneOutlineAttemptParag(parag_id).then(data=>{
if(data.status == true){
this.setState({ update_parag_text: data.parag.paragraph })
}
});
}
openParag = (parag_id) => {
this.setState({ open_parag: true }); 
this._getCurrentParag(parag_id);
}
_displayParagBtn(){
if(this.state.parag.length > 0){
return this.state.parag.map((data, i)=>
<View key={i} style={[ styles.sideButton, { backgroundColor: Colors.default } ]}>
<TouchableOpacity onPress={()=>this.openParag(data.id)}>
<Text style={[styles.sideButtonTitle, { color: Colors.white }]}>PARAGRAPH</Text>
<Text style={[styles.sideButtonIcon, { color: Colors.white }]}>{i+1}</Text>
</TouchableOpacity>
</View>
)
}
}
_displayOpenParag(){
if(this.state.open_parag == true){
return (
<View>
<View style={styles.openBox}>
<Text style={{ fontFamily: 'Comfortaa-Bold' }}>PARAGRAPH CONTENT : </Text>
<TextInput multiline={true} numberOfLines={6}
onChangeText={(update_parag_text) => this.setState({update_parag_text})}
value={this.state.update_parag_text}
/>
{ this.RenderFormErrors('update_parag_text') }
</View>
</View>
)
}
}
render() {
return (
<View style={{ flex: 1 }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={[ AppStyles.bgWhite, {width: '90%', height: '100%'}]}>
<ScrollView scrollEnabled={true}>
</ScrollView>
</View>
<View style={{width: '10%', height: '100%'}}>
{ this._displayParagBtn() }
</View>
</View>
{ this._displayOpenParag() }
</View>
);
}

如果您从上面的代码中检查，我会在componentDidMount中加载段落数据并设置状态。在进行渲染时，我调用了_displayParagBtn()函数以显示段落按钮。单击按钮时，它将触发传递段落 id 的openParag函数，这就是TextInput的打开方式。

从openParag函数中，我调用了另一个函数来从数据库加载段落数据并将当前段落设置为某种状态，以便我可以在打开时将其显示给TextInput。

传递参数并打开确切的数据一切正常，但是当我尝试在TextInput上进行编辑时，数据不断刷新，导致我无法编辑现有文本。我想知道它是否因为我获取和显示数据的方式而发生。我想不通。

Answer 1

因此，这里更清楚地解释了这个问题，this.setState在更新状态update_parag_text时会在延迟时间调用。