React Native TextInput значение продолжает обновляться - PullRequest
Новая
       5

React Native TextInput значение продолжает обновляться

0 голосов
/ 25 августа 2018

У меня есть эти абзацы, которые я сохранил в массиве. Затем я сопоставляю их для отображения кнопок в моем приложении, где каждая из них содержит идентификатор абзаца. Поэтому, когда пользователь нажимает одну конкретную кнопку, он передает идентификатор абзаца функции, чтобы получить данные из базы данных и отобразить их в реагирующий собственный 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 с пропущенным идентификатором абзаца, и именно так открывается TextInput.

Из функции openParag я вызвал другую функцию, чтобы загрузить данные абзаца из базы данных и установить текущий абзац в состояние, чтобы я мог отобразить его на TextInput, когда он открыт.

Все нормально работает с передачей параметра и открытием точных данных, но когда я пытаюсь выполнить редактирование на моем TextInput, данные продолжают обновляться, и я не могу редактировать существующий текст. Интересно, произошло ли это так из-за того, как я делаю выборку и отображение данных. Я не могу понять это.

1 Ответ

0 голосов
/ 26 августа 2018

Таким образом, проблема более четко объяснена здесь , this.setState вызывается с задержкой при обновлении update_parag_text в состоянии.

...