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

Question

我正在尝试使用滑动条功能从 HTTPS 服务器生成图像，但我的提取功能有问题。 该应用程序应该有一个滑块来确定长度变量，该变量将发送到服务器，服务器将根据长度更新并生成图像。

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)))

这是将保存图像的另一个组件

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

传递给fetch的options的body字段必须是字符串。 所以你可以用这个 : body: ({ length }) body: JSON.stringify({length})替换这个： body: ({ length }) body: JSON.stringify({length}) 。