React native 当状态通过网络调用更改时，对textinput的本机调用onChange作出反应

我有一个下拉列表，一旦更改网络调用被触发并从服务器获取一些值，现在我想动态调用更改输入值，但一旦我设置网络调用后的状态，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}
            />

---

谢谢

问题出在您的

InputText

组件中。该组件将值保持在其自身状态内，并根据其状态设置文本输入值，而不是使用道具中的值

您有两种选择：从组件中删除状态并仅使用道具中的值-这样，您的组件将由父级控制：

类InputText扩展组件{
render（）{
const{placeholder，secureTextEntry，keyboardType，maxLength，onChangeText，onSubmitEditing，value}=this.props；
返回(
//使用道具中的“onChangeText”
);
}
}

或者保留状态，并将值从其道具传递到

TextInput

，在未设置道具值的情况下，将状态值保留为备用值

类InputText扩展组件{
状态={
值：“”
}
componentDidMount（）{
这是我的国家({
值：this.props.value
});
}
onChangeText=（值）=>{
这是我的国家({
价值
}, () => {
this.props.onChangeText（值）；
})
}
render（）{
const{placeholder，secureTextEntry，keyboardType，maxLength，onChangeText，onSubmitEditing，value}=this.props；
返回(
);
}
}

发布一些代码，以便我们可以看到您正在做什么以及如何做。我已经编辑了代码，现在代码可用。网络呼叫后，我们不知道如何呈现输入，以便在输入字段中显示状态更改

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>
    );
}

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);
   });

 }