0

实际上我是 React Native 的新手。在我最近的项目中，我在使用 useMutation 挂钩更新服务器中的数据时遇到了一个问题。我附上了我正在使用它的文件。

供您参考，我附上了操场的屏幕截图。

注意：- 我没有收到错误，并且服务器中的值没有更新。如果我点击按钮。不需要重新获取它并使用查询显示信息，只需更新就足够了。

突变结构：

突变结构.

已发送 graphql 请求：

已发送 graphql 请求

import React, { Component,useState } from 'react';
import { View, Text, StyleSheet, Dimensions,ScrollView,AsyncStorage,TouchableHighlight,Alert,KeyboardAvoidingView} from 'react-native';
import TopHeader from '../../Header/TopHeader';
import { gql } from 'apollo-boost';
import Input from '../../SignIn/Input';

import { ScreenLoader } from '../../Loader';
import { useMutation } from '@apollo/react-hooks';


export const UPDATE_USER_DETAILS = gql`
mutation UpdateUser($input: AccountInput!){
  accountUpdate(input: $input){
    accountErrors{
      message
    }
    user{
      id
      email
      firstName
      lastName
    }
  }
}
`;

const getToken = async () => {
  const token = await AsyncStorage.getItem('token');
  console.log("Token = "+token);
  return token;
}

function UpdateUserComponent({ firstname,lastname }) {

  const [newfirstName, setNewfirstName] = useState(firstname);
  const [newlastName, setNewlastName] = useState(lastname);

  var token = getToken();
  console.log("Inside Update User Component");

  const [updateUser,{loading,data,error}] = useMutation(UPDATE_USER_DETAILS,{
    headers: {
      Authorization: token ? `Bearer ${token}` : ''}
    })
  if (loading) return <ScreenLoader/>
  if (error){
    console.log(error);
    return <Text>Error...</Text>
  } 
 
  console.log(data);

  return (
    <KeyboardAvoidingView style={styles.container} behavior='padding' enabled>
      <ScrollView>
      <View style={{ paddingTop: 36 }}>
        <Input type="text" value={newfirstName} onChange={e => setNewfirstName(e.target.value)} />
      <View style={{ paddingTop: 10 }}>
        <Input type="text" value={newlastName} onChange={e => setNewlastName(e.target.value)}/>
      </View>
      <TouchableHighlight underlayColor='#fff' onPress={() => updateUser({ variables: { "input": {"firstName": newfirstName,"lastName": newlastName }} })} >
        <View style={{ paddingTop: 50 }}>
          <View style={styles.buttonLayout}>
            <Text style={styles.buttonText}>Save Changes</Text>
          </View>
        </View>
      </TouchableHighlight>
      </View>
      </ScrollView>
    </KeyboardAvoidingView>
  )
}



const width = Dimensions.get('window').width;

class AccountSettings extends Component {

  render() {

    return (
      <View style={{ flex: 1 }}>
        <TopHeader text='Account Settings'/>
        <UpdateUserComponent/>
      </View>
    );
  }
}



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: 20,
},
buttonLayout: {
    backgroundColor: '#C5C5C5',
    width: width * 85 / 100,
    height: 45,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 20,
},
buttonText: {
    color: '#919191',
    fontSize: 14

},
  

})


export default AccountSettings;

更新：

从表单输入元素获取值时出现一些错误。如果我直接分配值，它正在更新。例如：- 如果我在按钮按下时使用此语句，则数据会在服务器上更新。

onPress={() => UpdateUser({ variables: { "input": {"firstName": "Prabhu","lastName": "Visu" }} }) }

请帮助我解决此问题，使其动态工作。谢谢 。！

4

1 回答 1

0

替换这个：

  *onChange={e => setNewfirstName(e.target.value)}*

有了这个：

  *onChangeText={text => setNewfirstName(text)}*

它会工作的。！

于 2020-01-07T09:31:01.553 回答