Question

我将这些段落存储在数组中。然后，我将它们映射到应用程序上的显示按钮，其中每个按钮都包含段落ID。因此，当用户单击一个特定按钮时，它将把段落ID传递给一个函数，以从数据库中获取数据并将其显示给React Native 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()函数以显示段落按钮。单击该按钮时，它将触发openParag函数，其中传递了段落ID，这就是TextInput的打开方式。

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

通过传递参数并打开确切的数据，一切工作都很好，但是当我尝试在TextInput上进行编辑时，数据不断刷新，导致我无法编辑现有文本。我想知道是否由于我获取和显示数据的方式而发生了。我不知道。

Answer 1

因此，对问题进行了更清楚的解释here，在状态下更新this.setState时，延迟调用update_parag_text。

React Native TextInput值不断刷新

1 个答案: