如何从 React Native App 将我的长度变量发送到我的 HTTPS 服务器

Question

I'm trying to use a slider bar function to produce an image out from the HTTPS server but I'm having issue with my fetch function. The App is supposed to have a slider which will determine the length variable, the variable will be sent to the server which will update and produce an image based of the length.

import { StatusBar } from 'expo-status-bar';
import React, {Component} from 'react';
import { StyleSheet, Text, View, Slider } from 'react-native';
import Dipole2 from './Components/Dipole2';


export default class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
    length : 2
    } 
    
  };

  render() {
    return (
        <View style = {styles.LengthContainer}> 
  
       <Dipole2></Dipole2>
       <Text style={styles.number}> Length of Dipole </Text>
        <Text style={styles.number}> {this.state.length.toFixed(1)}</Text>
        <Slider 
        style = {{width: 300}}
          maximumValue={10}
          minimumValue={0.1}
          minimumTrackTintColor="#308ecc"
          maximumTrackTintColor="#000000"
          step={0.1} 
          value={this.state.length}
          onValueChange={length => this.setState({length})}
          
          />
      
      </View>
    );
    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  LengthContainer: {
    flex: 400,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-end',
    marginBottom: 200,

  },
  ImageContainer: {
    flex: 500,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: 600,
    borderColor: 'black',
  },
  number: {

    fontSize: 25,
    textAlign: 'center',
    margin: 10,
  },
});

let data = {
  method: 'POST',
  body: ({ length }),
  headers: {

    'Content-Type': 'text/html',
    
  }
}
return fetch('https://dipolepattern.azurewebsites.net/api/HttpTrigger1', data)
        .then(response => response.json())  // promise
        .then(json => dispatch(receiveAppos(json)))

this is the other component that will hold the image

import React from 'react';
import { Image } from 'react-native';



const Dipole2 = props => {
    let pic = {
     uri: 'https://dipolepattern.azurewebsites.net/api/HttpTrigger1'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110, marginTop:50}}/>
    );
}

  
export default Dipole2;

Answer 1

The body field of the options passed to fetch must be a string. So you may replace this: body: ({ length }) by this : body: JSON.stringify({length}) .