Реакция собственного вызова onChange на textinput при изменении состояния через сетевой вызов

Question

У меня есть выпадающий список после изменения сетевого вызова и получения некоторого значения с сервера. Теперь я хотел бы динамически изменить входное значение, но onchange не запускается, когда я устанавливаю состояние после сетевого вызова.

Экран ввода с визуализацией

<SearchableDropdown  style={styles.inputBox}
      onTextChange={this.onChangeText}
      selectedItems={this.state.selectedItems}
      onItemSelect={(item) => {
          const items = this.state.selectedItems;
          this.setState({ serviceid: JSON.stringify(item.id) });
          this.getServiceCategories(JSON.stringify(item.id))
          this.setState({
            CategoryName:this.state.CategoryName
          });
      }}

      containerStyle={{ padding: 5 }}
      textInputStyle={{
        padding: 12,
        borderWidth: 1,
        borderColor: '#ccc',
        borderRadius: 15,
        color: '#000',
        width:300
      }}
      itemStyle={{
        padding: 10,
        marginTop: 2,
        backgroundColor: '#ddd',
        borderColor: '#fff',
        borderWidth: 1,
        borderRadius: 15,
        color: '#000',
      }}
      itemTextStyle={{ color: '#000' }}
      itemsContainerStyle={{ maxHeight: 240 }}
      items={this.state.serviceData}
      defaultIndex={0}
      placeholder="Select Service"
      name="serviceid"
      resetValue={false}
      underlineColorAndroid="transparent"
    />

    <Field style={styles.inputBox}
        name="categoryid"
        value={this.state.CategoryName}
        placeholder="Category"
        returnKeyLabel={this.state.CategoryID}
        component={this.renderTextInput}

        />


        <Field style={styles.inputBox}
            name="subcategoryid"
            value={this.state.SubCategoryName}
            returnKeyLabel={this.state.SubCategoryID}
            placeholder="Sub Category"
            component={this.renderTextInput}
            />

Renderinput

renderTextInput = (field) => {
    const {meta: {touched, error}, label, secureTextEntry, maxLength,value, keyboardType, placeholder, input: {onChange, ...restInput}} = field;

    return (
        <View>
          <InputText
              onChangeText={onChange}
              maxLength={maxLength}
              keyboardType={keyboardType}
              secureTextEntry={secureTextEntry}
              label={label}
              {...restInput} />
        {(touched && error) && <Text style={styles.errorText}>{error}</Text>}
        </View>
    );

}}

компонент ввода

class InputText extends Component<{}> {

state = {
    value: ""
}

componentDidMount() {
    this.setState({
        value: this.props.value
    });
}

onChangeText = (value) => {


    this.setState({
        value
    }, () => {
        this.props.onChangeText(value);
    })
}

render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
    return (
        <View>
            <TextInput
                style={styles.inputBox}
                underlineColorAndroid="rgba(0,0,0,0)"
                placeholder={placeholder}
                placeholderTextColor="rgba(255,255,255,0.8)"
                selectionColor="#999999"
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                maxLength={maxLength}
                returnKeyType="next"
                value={this.state.value}
                onSubmitEditing={onSubmitEditing}
                onChangeText={this.onChangeText} />
        </View>
    );
}

}

После того, как выпадающий список изменить сетевой вызов API

getServiceCategories =(value)=>{

 fetch('http://localhost/api/getServiceCategories?serviceid='+value)

   .then(response => { return response.json();})
   .then(responseJson => {

     this.setState({
       CategoryID:responseJson[0].CategoryID,
       SubCategoryID:responseJson[0].SubCategoryID,
       CategoryName:responseJson[0].CategoryName,
       SubCategoryName:responseJson[0].SubCategoryName,

      });

   })
   .catch(error => {
     console.error(error);
   });

 }

спасибо

Answer 1

Проблема в вашем InputText компоненте. Этот компонент хранит значение в своем собственном состоянии и устанавливает значение ввода текста из своего состояния, а не использует значение из реквизита.

У вас есть два варианта: удалить состояние из компонента и использовать только значение из реквизита - таким образом ваш компонент будет контролироваться родителем:

class InputText extends Component<{}> {
  render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
    return (
        <View>
            <TextInput
                style={styles.inputBox}
                underlineColorAndroid="rgba(0,0,0,0)"
                placeholder={placeholder}
                placeholderTextColor="rgba(255,255,255,0.8)"
                selectionColor="#999999"
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                maxLength={maxLength}
                returnKeyType="next"
                value={value} // Use `value` from props
                onSubmitEditing={onSubmitEditing}
                onChangeText={onChangeText} /> // Use `onChangeText` from props
        </View>
    );
  }
}

Или сохранить состояние и передать значение из его реквизита в TextInput и сохранить значение состояния как отступление в случае, если значение пропеллера не установлено.

class InputText extends Component<{}> {
  state = {
    value: ""
  }

  componentDidMount() {
    this.setState({
        value: this.props.value
    });
  }

  onChangeText = (value) => {
    this.setState({
        value
    }, () => {
        this.props.onChangeText(value);
    })
  }

  render() {
    const {placeholder, secureTextEntry, keyboardType, maxLength, onChangeText, onSubmitEditing,value} = this.props;
    return (
        <View>
            <TextInput
                style={styles.inputBox}
                underlineColorAndroid="rgba(0,0,0,0)"
                placeholder={placeholder}
                placeholderTextColor="rgba(255,255,255,0.8)"
                selectionColor="#999999"
                secureTextEntry={secureTextEntry}
                keyboardType={keyboardType}
                maxLength={maxLength}
                returnKeyType="next"
                value={value || this.state.value} // Note that now the value is the value from the props and if it will be falsey, then the state value will be used as a fallback.
                onSubmitEditing={onSubmitEditing}
                onChangeText={this.onChangeText} />
        </View>
    );
  }
}