react-native - react native 错误 : "Variable" is read only

Question

我无法在 React Native 上将数据显示为文本/标签并得到错误

这是我的代码

function ResetPasswordScreen({navigation}) {

const [email] = useState({ value: '', error: '' });
const [password, setPassword] = useState({ value: '', error: '' });

   function ResetPasswordFunction() {
        {
          fetch("http://192.168.0.18/Api/reset_password.php",{
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              email : email.value,
              password : password.value
       
            })
          })
          .then((response) => response.json())
          .then((responseJson) => {
           console.log(responseJson.message);
           if(responseJson.success === 1)
            {
              alert(responseJson.message)
              navigation.navigate('Settings')
            }
            else{
              alert(responseJson.message)
            }
         
             }).catch((error) => {
               console.error(error);
             });
         }         
     }
  return (
    <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
      <Header>Reset Password</Header>
      
      <Text style = {styles.TextComponentStyle}> { email = email.value} </Text>

      <TextInput
        label="Password"
        returnKeyType="done"
        value={password.value}
        onChangeText={password => setPassword({ value: password})}
        error={!!password.error}
        errorText={password.error}
        secureTextEntry={true}
      />
      <Button mode="contained" onPress={ResetPasswordFunction} >
        Reset Password
        </Button>
    </View>

Answer 1

function ResetPasswordScreen({route, navigation}) {
   const [password, setPassword] = useState({ value: '', error: '' });
   const { email } = route.params; // If getting email from navigation param [Method 1]

   // If manually set the email on mounted [Method 2]
   const [email, setEmail] = useState({ value: '', error: '' });

   useEffect(() => {
      this.setEmail(prevEmail => {
           return { ...prevEmail, value: 'some@email.com' }
      }, []); //Empty [] will make it only run when mounted
      // setEmail is done in this way to make sure value of error still exist in the object after you edited name, otherwise the object will be replaced with just having { value: 'some@email.com' }
     // I believe you need to apply this for setPassword as well
   })
   // Do not need to do the useEffect if you are using method 1


   function ResetPasswordFunction() {
        {
          fetch("http://192.168.0.18/Api/reset_password.php",{
            method: 'POST',
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              email : email.value,
              password : password.value
       
            })
          })
          .then((response) => response.json())
          .then((responseJson) => {
           console.log(responseJson.message);
           if(responseJson.success === 1)
            {
              alert(responseJson.message)
              navigation.navigate('Settings')
            }
            else{
              alert(responseJson.message)
            }
         
             }).catch((error) => {
               console.error(error);
             });
         }         
     }
  return (
    <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
      <Header>Reset Password</Header>
      
      <Text style = {styles.TextComponentStyle}> {email.value} </Text>

      <TextInput
        label="Password"
        returnKeyType="done"
        value={password.value}
        onChangeText={password => setPassword({ value: password})}
        error={!!password.error}
        errorText={password.error}
        secureTextEntry={true}
      />
      <Button mode="contained" onPress={ResetPasswordFunction} >
        Reset Password
        </Button>
    </View>