时间戳

首页 > 解决方案 > 单击编辑按钮时不保存输入数据

reactjs - 单击编辑按钮时不保存输入数据

问题描述

我现在有这三种状态。当我想编辑地址时，它不会立即保存。当再次从 movit 驱动程序页面返回到个人详细信息页面时，它会显示已编辑的输入。

这是 movit 驱动程序页面 这是 movit 驱动程序页面

这是个人资料 这是个人资料

这是编辑页面 这是编辑页面

从驱动程序页面返回时显示已编辑输入的异步存储可能存在一些问题。

**Address.js**
  constructor(props) {
    super(props)
    this.state = {
      address: '',
      userToken: null
    }
  }
  
  async componentWillMount() {
    try {
      let value = await AsyncStorage.getItem('userData')
      let userDetails = JSON.parse(value)
      console.log('userDetails 2: ', userDetails)
      if (userDetails !== null) {
        this.setState({
          address: userDetails.address,
          userToken: userDetails.token
        })
      }
      } catch (error) {
        console.log(error)
    }
  }

  saveAddressEdit = (fieldName, fieldValue) => {
    AsyncStorage.setItem(fieldName, fieldValue)
  
    let {userToken} = this.state
  
    var formData = new FormData()
    formData.append(fieldName, fieldValue)
  
    fetch('MyURL', {
      method: 'POST',
      headers: {
        'X-API-KEY': 'myApiKey',
        'Authorization': userToken
      },
      body: formData
    }).then(function (response) {
       console.log(response)
       let data = JSON.parse(response._bodyText)
       Alert.alert(data.message)
    })
    .catch((error) => {
      console.log(error)
    })
    .done()
  }

  render() {
    const {address} = this.state

    return (
      <Container>
        <Content style={{marginHorizontal:20}}>
          <Item style={{marginVertical:40}}>
            <Input placeholder=" Type your Address:" 
              onChangeText={(address) => this.setState({address})}
              value={address}
            />
          </Item>
           <Button full danger  onPress={()=>this.saveAddressEdit('address', address)} style={{backgroundColor:'#ff0000'}}>
                <Text style={{color: '#ffffff'}}>Update Address</Text>
              </Button>
        </Content>
      </Container>
    );
  }
}

这是用于编辑的address.js代码。我需要的解决方案就像我想立即显示已编辑的输入。提前致谢。

标签： reactjsreact-native

解决方案

单击按钮时，您没有传递状态。将 onPress 函数调用更改为

onPress={()=>this.saveAddressEdit('address', this.state.address)}

另外，更改 TextInput 值

值={this.state.address}

并且不要尝试使用与 onTextChange 回调中的常量相同的名称

所以你的最终渲染功能是

render() {

    return (
      <Container>
        <Content style={{marginHorizontal:20}}>
          <Item style={{marginVertical:40}}>
            <Input placeholder=" Type your Address:" 
              onChangeText={(address) => this.setState({address:address})}
              value={this.state.address}
            />
          </Item>
           <Button full danger  onPress={()=>this.saveAddressEdit('address', this.state.address)} style={{backgroundColor:'#ff0000'}}>
                <Text style={{color: '#ffffff'}}>Update Address</Text>
              </Button>
        </Content>
      </Container>
    );
  }

推荐阅读