React Native集成Apollo Mutation遇渲染错误，求代码问题排查

核心错误原因 #

你遇到的Objects are not valid as a React child (found: [object Error])错误，是因为直接将Error对象传给了<Text>组件。React无法渲染原始的Error对象，必须提取其中的文本属性（比如message）来展示。

代码中的具体问题及修复 #

1. 错误信息渲染错误 #

修改错误处理逻辑，不要直接返回Error对象，而是提取错误的文本内容：

// 原代码
if (error) return <Text>{error}</Text>

// 修改后
if (error) {
  const errorMsg = error.graphQLErrors?.[0]?.message || error.message || '未知错误';
  return <Text>登录失败：{errorMsg}</Text>;
}

2. 邮箱输入框的value绑定错误 #

邮箱输入框错误绑定了values.firstName，但你的state里只有email字段，应该改为values.email：

// 原代码
<TextInput 
  placeholder='Please Enter Email' 
  style={styles.textInput} 
  onChangeText={(text) => handleChange('email', text)}
  value={values.firstName} 
/>  

// 修改后
<TextInput 
  placeholder='Please Enter Email' 
  style={styles.textInput} 
  onChangeText={(text) => handleChange('email', text)}
  value={values.email} 
/>  

3. 密码输入框缺少value绑定 #

密码输入框未绑定state值，会导致输入内容无法与state同步，添加value={values.password}：

// 原代码
<TextInput 
  secureTextEntry={true} 
  placeholder='Please Enter Password' 
  style={styles.textInput} 
  onChangeText={(text) => handleChange('password', text)} 
/>

// 修改后
<TextInput 
  secureTextEntry={true} 
  placeholder='Please Enter Password' 
  style={styles.textInput} 
  onChangeText={(text) => handleChange('password', text)}
  value={values.password} 
/>

修复后的核心代码片段 #

const Login = (props) => {
  const [values, setValues] = useState({ email: '', password: '' });
  const [signinUser,{error,loading,data}] = useMutation(SIGNIN_USER)  

  if (loading) return <Text>Loading... 🚀</Text>
  if (error) {
    const errorMsg = error.graphQLErrors?.[0]?.message || error.message || '登录失败';
    return <Text>{errorMsg}</Text>
  }

  const handleChange = (name, value) => {
    setValues({
      ...values,
      [name]: value,
    });
  };

  const handleSubmit = () => {
    signinUser({
      variables: {
        userSignin: values
      }
    })
  }

  return (
    <View style={styles.container}>
          <View style={styles.titleView} >
            <Text style={styles.title}>Login</Text>
          </View>
          <View style={{ height: hp('5%') }}></View>    
            <TextInput 
              placeholder='Please Enter Email' 
              style={styles.textInput} 
              onChangeText={(text) => handleChange('email', text)}
              value={values.email} 
            />  
            <TextInput 
              secureTextEntry={true} 
              placeholder='Please Enter Password' 
              style={styles.textInput} 
              onChangeText={(text) => handleChange('password', text)}
              value={values.password} 
            />
          <TouchableOpacity style={styles.buttonView} onPress={handleSubmit} >
            <Text style={styles.btnText}>Signin</Text>
          </TouchableOpacity>
        </View>
  )
}

内容的提问来源于stack exchange，提问作者riddhi