React native 带有TextInput值的Axios post不工作,无尾随错误

React native 带有TextInput值的Axios post不工作,无尾随错误,react-native,axios,React Native,Axios,我正在尝试将一些参数从TextInput传递到Axios中的主体。它不会使用console.log显示任何错误或返回状态 我有几种方法可以看出问题出在哪里。我试图将函数传递给ComponentDiDMount和其他一些组件的生命周期,但没有成功。我还直接传递了值,使用了Json.parse、Json.encode、Json.stringify,没有错误,但没有返回状态。我知道我可能犯了一个错误。 更重要的是,我不知道我是否做得不对。我尝试从下拉列表中获取数据,我需要使用键将所选值的对应id传递给

我正在尝试将一些参数从TextInput传递到Axios中的主体。它不会使用console.log显示任何错误或返回状态

我有几种方法可以看出问题出在哪里。我试图将函数传递给ComponentDiDMount和其他一些组件的生命周期,但没有成功。我还直接传递了值,使用了Json.parse、Json.encode、Json.stringify,没有错误,但没有返回状态。我知道我可能犯了一个错误。 更重要的是,我不知道我是否做得不对。我尝试从下拉列表中获取数据,我需要使用键将所选值的对应id传递给category_id。当页面加载时,它会获取类别,即下拉列表中具有对应id的字段名,但只需要将对应id传递给Axios.post

import React, { Component } from 'react';
import { 
  Text,
  TextInput, 
  View,
  Image,
  TouchableOpacity, 
  Button,
  StyleSheet} from 'react-native';

  import { Dropdown } from 'react-native-material-dropdown';
  import axios from 'axios';
export default class CreatePost extends Component {
    constructor(props){
        super(props)
        this.state = {
            category: [],
            title: '',
            cat: '',
            author:'',
            body:''
        }
    }

    static navigationOptions = ()=> {
      return{
      title: null,
      headerStyle: { backgroundColor: '#1A5276', color:'#fff' },
      header:null
      }
  };
    componentWillMount(){
      axios.get(`http://localhost/rest_api_myblog/api/category/read.php`)
      //.then(json => console.log(json.data.data[0].name))
     .then(json => json.data.data)
     .then(newData => this.setState({category: newData}))
     .catch(error => alert(error))

      }

      onChangeTextPress(key, value){
        this.setState((prevState) => {
          //let selected = Object.assign({}, prevState.selected);
          let selected = Object.assign({},prevState.selected);
          selected[key] = value;
          return { selected };
        }, () => {
          this.setState({ cat: this.state.selected[key]});
         // console.log(cat);

        });
      }


        onCreate = event => {
        event.preventDefault();  
        const body = {
           author :this.state.author,
          title : this.state.title,
          body : this.state.body,
          category_id :this.state.cat
        };
        axios.post(`http://localhost/rest_api_myblog/api/post/create.php`, JSON.parse(body))
        .then(res => {console.log(res)
        })
        .catch(e => console.log(e));
      }


    render() {
      const  data = this.state.category.map((cat, i) =>({
        value: cat.name,
        key:  i
      }));

      return (

        <View style= {styles.container}>
          <View><Image style={styles.image} source={require('../images/blog.jpg')}/>
          <Text style={styles.header}>Create Post</Text></View>
          <View style={{alignItems:'center'}}>
          <Text style= {styles.label}>Title</Text>
                <TextInput 
                  style={styles.textbox}  
                  placeholder="Title"
                  onChangeText= {(title)=>{
                       this.setState({title});
                  }}
                  value={this.state.title}/>

                <Text style= {styles.label}>Author</Text> 
                <TextInput 
                  style={styles.textbox} 
                  name='author' 
                  placeholder="Author"
                  onChangeText= {(text)=>{
                       this.setState({author: text});
                  }}
                  value={this.state.author}
                />
                <Text style= {styles.label}>Category</Text> 

                      <Dropdown
                      dropdownOffset={{top:5,  left: 0 }}
                      containerStyle={{
                        borderWidth:1, 
                        borderColor:'lightgrey', 
                        borderRadius:13, width:300, height: 40,
                        paddingLeft:6, 
                        backgroundColor:'#fff'}}
                      rippleCentered={true}
                      inputContainerStyle={{ borderBottomColor: 'transparent' }}
                      data = {data}
                      valueExtractor={({value})=> value}

                      onChangeText={(value, key)=>{this.onChangeTextPress( value, key)}}
                  />
                <Text style= {styles.label}>Body</Text> 
                <TextInput 
                  style={styles.textbox}  
                  multiline = {true}
                  numberOfLines = {4}
                  placeholder="Body"
                  onChangeText= {(body)=>{
                       this.setState({body});
                  }}
                  value={this.state.body}
                />
                <TouchableOpacity style={styles.buttonContainer}
                 onPress = {()=> {this.onCreate }}
                >
                   <Text style={styles.buttonText}>Create</Text>
                </TouchableOpacity>
            </View>
        </View>
      )
    }
}
我真正想要的是一个基于用户输入的TextInput值的post方法。此外,还可以传递所选下拉值的对应ID,而不是实际值


非常感谢你的帮助

从代码中可以看出,问题似乎在于调用onCreate方法的方式

你正在做:

<TouchableOpacity style={styles.buttonContainer} onPress={()=> {this.onCreate }}>
    <Text style={styles.buttonText}>Create</Text>
</TouchableOpacity>
您应该做的事情有:

<TouchableOpacity style={styles.buttonContainer} onPress={this.onCreate}>
    <Text style={styles.buttonText}>Create</Text>
</TouchableOpacity>
或:


谢谢你的迅速回复。我已经更改了onCreate,但是我可以看到这个错误ExceptionsManager.js:74位置1处JSON中的意外标记o,这个错误是另外一个错误,与这个问题主题不同。但我的猜测是,您的数据已经是JSON,因此不需要解析它。因此,您应该使用axios.post'http://localhost/rest_api_myblog/api/post/create.php'是的,我已经取出了JSON.parse。但是,这是一个新错误:警告:标头可能不包含多个标头,如果在将其传递给axios之前在console.logbody中检测到新行,它会是什么样子?看起来像是格式正确的JSON?{作者:Jsjs,标题:Hshs,正文:Sss,类别_id:1}这是从console.log
<TouchableOpacity style={styles.buttonContainer} onPress={() => this.onCreate()}>
    <Text style={styles.buttonText}>Create</Text>
</TouchableOpacity>