Question

我试图将一些参数从TextInput传递到Axios的正文中。它不会显示任何错误，也不会使用console.log（）返回状态。

我有几种方法可以查看问题所在。我试图将函数传递给ComponentDiDMount和其他一些组件的生命周期，但没有成功。我还直接传递了值，使用了Json.parse（），JSON.encode（），JSON.stringify（），没有错误，但未返回状态。我知道我可能会犯一个错误。另外，我不知道我是否做错了。我尝试将数据提取到一个下拉列表中，我需要使用该下拉列表将所选值的对应ID传递给category_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而不是实际值。

非常感谢您的协助。

Answer 1

据我所读的代码，问题似乎出在您调用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>

或者：

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

带有TextInput值的Axios帖子无法正常工作且没有尾随错误

1 个答案: