React 本机代码无法将数据发送到 django api

Question

我是初学者，我在 React Native 应用程序的后端使用 Django。 我无法使用 fetch 方法从我的应用程序向 django 管理面板添加数据。 我没有收到任何错误，但我的数据没有发布到后端。我在 fetch 方法中使用了 django api 作为 url。 请让我知道是否需要检查任何其他代码片段。 在这里希望得到一些帮助。

export class LoginScreen extends Component {
  constructor() {
    super();
    this.state = {
      email: '',
      name: '',
    };
  }

  updateValue(text, field) {
    if (field == 'email') {
      this.setState({
        email: text,
      });
    } else if (field == 'pwd') {
      this.setState({
        pwd: text,
      });
    }
  }

  submit() {
    let collection = {};

    collection.email = this.state.email;
    collection.pwd = this.state.pwd;
    console.warn(collection);
    let url='http://10.0.0.2:8000/api/mdlApp/'



    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(collection),
    })
      .then((response) => response.json())
      .then((collection) => {
        console.log('Success:', collection);
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }

  render() {
    return (
      <ImageBackground source={require('../images/bg4.png')} style={styles.bg}>
        <SafeAreaView style={styles.container}>
          <Logo />
          <View style={styles.container1}>
            <TextInput
              style={styles.inputBox}
              name="email"
              placeholder="Enter Your Email"
              placeholderTextColor="#ffffff"
              onChangeText={(text) => this.updateValue(text, 'email')}
            />

            <TextInput
              style={styles.inputBox}
              name="pwd"
              placeholder="Enter Your Password"
              secureTextEntry={true}
              placeholderTextColor="#ffffff"
              onChangeText={(text) => this.updateValue(text, 'pwd')}
            />

            <TouchableOpacity
              //onPress={() => this.props.navigation.navigate('HomeApp')}
              onPress={() => this.submit()}
              style={styles.button}
              htmlType="submit">
              <Text style={styles.buttonText}> LOGIN </Text>
            </TouchableOpacity>
          </View>
          <View style={styles.signupTextCont}>
            <Text style={styles.signupText}>Don't have an account yet?</Text>
            <TouchableOpacity
              onPress={() => this.props.navigation.navigate('Register')}
              style={styles.signupButton}>
              <Text>Register Now</Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      </ImageBackground>
    );
  }
}

Answer 1

更改您的代码如下..先安装 axios

submit = () => {
   
 const url='http://10.0.0.2:8000/api/mdlApp/' 
    
    let collection = {
     email: this.state.email,
     pwd: this.state.pwd
    };
    
    axios.post(`${url}`, collection, {
    
    headers: {
    'content-type': 'application/json'
    }
    } ).then(res => {
    console.log(res.data)
    }))
    }