Question

React Native的初学者会感激一些帮助！

我在一个页面上有输入，允许用户输入数据，这些数据将保存为状态。如何允许这些状态成为api调用的参数？我已经尝试过react-navigation，但是出现了一个错误，说“this.props.navigation”是未定义的。但是，将状态传递给文本标记（this.props.navigation.state.params.term）会成功显示用户输入数据。

拜托，谢谢！

error image

PreferencePage（输入的位置）：

<View>
<CardSection>
<Input 
    label="Food"
    value={this.state.term}
    onChangeText={term => this.setState({ term })}
 />
 </CardSection>
 </View> 

 <View style={{marginTop: 5, marginBottom: 5}}>

 <TouchableOpacity>
   <Button  //onPress={this.onButtonPress.bind(this)}  
     onPress= {() => this.props.navigation.navigate('SwipeFunction', 
     {term: this.state.term})}
     title="Start Swiping" />
 </TouchableOpacity> 

 </View>

SwipeFunction页面（其中api调用）：

import React, { Component } from 'react';
import { View } from 'react-native';
import axios from 'axios';
import SwipeCard from './SwipeCard';
import PreferencePage from './PreferencePage';

class SwipeFunction extends Component {

constructor(){
super(props)
}

state = { 
businesses: [], 
profileIndex: 0 
};

config = {
headers: {'Authorization': 'Bearer 8PFnRjBdeczBvlqjph1bzECWVbJDj_p4wpjf1fHFinCrNBfw5bjhsRF60TpwjjEQoyEesUm8vjG8taEzjXxI1XIRNYiPm8akqUgjxk6gUaVGMnKvsic8zIy-XfeYWnYx'},
params: {
  term: this.props.navigation.state.params.term,    
}
};

componentWillMount() {
axios.get('https://api.yelp.com/v3/businesses/search', config)
.then(response => this.setState({ businesses: response.data.businesses }));

Answer 1

该错误似乎表明this.props.navigation未定义。确保将navigation作为道具正确传递给PreferencePage。

将本机用户输入反应为API参数

1 个答案: