从状态的发布请求中发送日期始终返回NULL

Question

我试图发送一个包含日期时间戳类型的帖子请求，我正在使用日期选择器，在onchangevalue中我将日期存储在this.state.date中。无论如何后端工作正常，因为使用app和post man添加了请求。

但问题是我从应用程序发送请求的日期我最终得到了这个结果：

奇怪的是，日期是正确存储的，因为当我试图在警报中显示它时：qazxsw poi

这是选择器的日期。所以......我不知道会出现什么问题。这是我的代码

找到一个临时解决方案：我使用时刻转换日期并且它工作，但我想知道它为什么它首先没有工作解决方案代码`addRendezVous =（）=> {const date = moment（this.state.date）。格式（ “YYYY / MM / DD”）; Alert.alert（日期）;

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  FlatList,
  ListView,
  ImageBackground,
  Dimensions,
  Image,
  Alert
} from "react-native";
import {
  Container,
  Header,
  Left,
  Body,
  Right,
  Title,
  Subtitle,
  Icon,
  Content,
  Footer,
  FooterTab,
  Button,
  Text,
  Badge,
  List,
  ListItem,
  Form,
  Picker,
  DatePicker
} from "native-base";
import Icon0 from "react-native-vector-icons/MaterialCommunityIcons";
import Icon1 from "react-native-vector-icons/FontAwesome";
import CountDown from "react-native-countdown-component";
import moment from "moment";
import "moment/locale/fr";
import bg from "../../assets/images/tryb.png";
import logo from "../../assets/images/trylogo.png";
import Iconbtn from "@expo/vector-icons/Ionicons";
const { width: WIDTH } = Dimensions.get("window");

class Prendre extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selected: "key2"
    };
    this.state = {
      idmedecin: "2",
      idpatient: "1",
      etat: "1",
      date: ""
    };
    this.state = { chosenDate: new Date() };
    this.setDate = this.setDate.bind(this);
  }
  setDate(newDate) {
    this.setState({ chosenDate: newDate });
  }
  onValueChange(value: string) {
    this.setState({
      selected: value
    });
  }
  addRendezVous = () => {
    Alert.alert(this.state.date);

    var details = {
      idmedecin: 1,
      idpatient: 1,
      etat: 1,
      date: this.state.date
    };

    var formBody = [];
    for (var property in details) {
      var encodedKey = encodeURIComponent(property);
      var encodedValue = encodeURIComponent(details[property]);
      formBody.push(encodedKey + "=" + encodedValue);
    }
    formBody = formBody.join("&");

    fetch("http://***.***.***.***:3000/rendezvousinsert", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
      },
      body: formBody
    });
  };

  render() {
    return (
      <Container style={{ alignItems: "center" }}>
        <ImageBackground source={bg} style={styles.Backgroundcontainer}>
          <Content>
            <Form style={{ alignItems: "center", marginTop: 15 }}>
              <Image source={logo} style={styles.logo} />
              <Text
                style={{
                  fontFamily: "Ionicons",
                  fontSize: 20,
                  fontWeight: "bold",
                  color: "#0c75b0",
                  textAlign: "center",
                  marginTop: 35
                }}
              >
                {" "}
                votre rendez vous avec le docteur du spécialité{" "}
              </Text>
              <Picker
                mode="dialog"
                iosHeader="Select your SIM"
                iosIcon={<Icon name="arrow-down" />}
                style={{ width: WIDTH }}
                selectedValue={this.state.selected}
                onValueChange={this.onValueChange.bind(this)}
                itemStyle={{
                  backgroundColor: "grey",
                  color: "blue",
                  fontFamily: "Ionicons",
                  fontSize: 17
                }}
              >
                <Picker.Item label="Wallet" value="key0" />
                <Picker.Item label="ATM Card" value="key1" />
                <Picker.Item label="Debit Card" value="key2" />
                <Picker.Item label="Credit Card" value="key3" />
                <Picker.Item label="Net Banking" value="key4" />
              </Picker>
              <Text
                style={{
                  fontFamily: "Ionicons",
                  fontSize: 20,
                  fontWeight: "bold",
                  color: "#0c75b0",
                  textAlign: "center"
                }}
              >
                {" "}
                Au nom du{" "}
              </Text>
              <Picker
                mode="dialog"
                iosHeader="Select your SIM"
                iosIcon={<Icon name="arrow-down" />}
                style={{ width: WIDTH }}
                selectedValue={this.state.selected}
                onValueChange={this.onValueChange.bind(this)}
              >
                <Picker.Item label="Wallet" value="key0" />
                <Picker.Item label="ATM Card" value="key1" />
                <Picker.Item label="Debit Card" value="key2" />
                <Picker.Item label="Credit Card" value="key3" />
                <Picker.Item label="Net Banking" value="key4" />
              </Picker>
              <Text
                style={{
                  fontFamily: "Ionicons",
                  fontSize: 20,
                  fontWeight: "bold",
                  color: "#0c75b0",
                  textAlign: "center"
                }}
              >
                {" "}
                A la date du
              </Text>
              <DatePicker
                defaultDate={new Date(2018, 4, 4)}
                minimumDate={new Date(2018, 1, 1)}
                maximumDate={new Date(2018, 12, 31)}
                locale={"fr"}
                timeZoneOffsetInMinutes={undefined}
                modalTransparent={false}
                animationType={"fade"}
                androidMode={"default"}
                placeHolderText="cliquez ici pour choisir une date"
                textStyle={{
                  fontFamily: "Ionicons",

                  fontWeight: "bold",
                  color: "#cf1d76",
                  textAlign: "center"
                }}
                placeHolderTextStyle={{ color: "#D3D3D3" }}
                onDateChange={(this.setDate, date => this.setState({ date }))}
                disabled={false}
              />
              <Text
                style={{
                  fontFamily: "Ionicons",
                  fontSize: 15,
                  fontWeight: "bold",
                  color: "#cf1d76",
                  textAlign: "center"
                }}
              >
                Date: {this.state.chosenDate.toString().substr(4, 12)}
              </Text>
              <Button
                onPress={this.addRendezVous.bind(this)}
                style={{
                  justifyContent: "center",
                  marginHorizontal: "30%",
                  color: "#0c75b0",
                  marginTop: 30,
                  width: 170
                }}
              >
                <Iconbtn
                  name="md-checkbox"
                  style={{
                    fontSize: 24,
                    marginLeft: 5,
                    borderRadius: 25,
                    color: "white"
                  }}
                />
                <Text>envoyer</Text>
              </Button>
            </Form>
          </Content>
        </ImageBackground>
      </Container>
    );
  }
}

export default Prendre;
const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  Backgroundcontainer: {
    flex: 1,

    alignItems: "center"
  },
  logo: {
    justifyContent: "center",
    width: 128,
    height: 155,
    marginTop: 5
  }
});

}`

Answer 1

在构造函数中，您将初始化状态两次。

var details = {
    'idmedecin': 1,
    'idpatient': 1,
    'etat': 1,
    'date': date

};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('http://192.168.1.107:3000/rendezvousinsert', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: formBody
})

当您第二次使用它时，日期的初始值变为null而不是空字符串，因为它被覆盖。这使得this.state.date = null。你应该做的是

this.state = {
  idmedecin: "2",
  idpatient: "1",
  etat: "1",
  date: ""
};
this.state = { chosenDate: new Date() };

这将保持其余变量的完整性。现在，您应该将this.state.date视为空字符串，而不是null。