저는 React Native와 함께 API를 사용하는 것이 처음입니다. 몇 가지 알아 냈지만 지금 시도하고있는 것은 검색 기능을 만드는 것입니다. 지금까지 몇 가지를 시도했지만 함수가 호출되지 않거나 객체로 호출되는 함수에 대한 오류가 발생합니다. 또한이 API 호출을 위해 axios를 사용하고 있습니다.
여기 내가 지금까지 얻은 것입니다.
export default class CategoryScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
isVisible: true,
city: '280',
isLoading: true,
search: ''
}
}
async componentDidMount() {
try {
const id = this.props.navigation.state.params.category;
const city = this.state.city;
const result = await axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/search?city_id=${city}&category=${id}`,
headers: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
}
});
this.setState({ data: result.data.restaurants });
} catch (err) {
console.log(err);
} finally {
this.setState({ isLoading: false });
}
}
updateSearch = search => {
this.setState({ search });
};
searchReq = () => {
axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/search?city_id=${city}&q${search}&category=${id}`,
header: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
}
});
this.setState({ data: result.data.restaurants });
}
render() {
const { search } = this.state;
return (
<SearchBar
placeholder="Type Here..."
onChangeText={this.updateSearch}
onSubmitEditing={this.searchReq}
value={search}
/>
)
}
}
좀 더 진보 된 방법이 있다면 새로운 것을 배우는 데 열려 있고, 내가하고 싶은 것을 성취하고 싶습니다. 또한 현재의 방법이 효과가 있었다면 사용자가 그 사이에 공백을 추가하면 여전히 문제가 발생할 수 있다는 것을 알고 있으므로 새롭고 더 발전된 방법을 배울 수 있습니다.
여기 엑스포 스낵입니다 https://snack.expo.io/SJoIr8u1I
검색 기능에서 몇 가지 실수를 발견했습니다.
city, search&에없는 id가치 를 얻어야합니다searchReq()result.data.restaurants가치를 할당하기 전에 가치 를 얻어야 합니다.data: result.data.restaurants이미 할당했기 때문에 this.setState({ search })그 값 searchReq()은 아래와 같습니다.
searchReq = async () => {
try {
const result = await axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/search?city_id=280&q${this.state.search}&category=11`,
headers: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
}
});
this.setState({ data: result.data.restaurants });
} catch (error) {
this.setState({ data: [] });
console.log(error);
}
}
따라서 전체 소스 코드는 다음과 같습니다.
import React, { Component } from 'react';
import {
View,
Text,
FlatList,
StyleSheet,
TouchableOpacity,
Dimensions,
ActivityIndicator,
} from 'react-native';
import { Card, Image, SearchBar, Icon } from 'react-native-elements';
import Logo from '../assets/Logo.png'
import axios from 'axios';
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
export default class CategoryScreen extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
isVisible: true,
city: '280',
isLoading: true,
search: ''
}
}
async componentDidMount() {
try {
const result = await axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/search?city_id=280&category=11`,
headers: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
}
});
this.setState({
data: result.data.restaurants,
isLoading: false
});
} catch (err) {
this.setState({ isLoading: false });
console.log(err);
}
}
updateSearch = search => {
this.setState({ search });
};
searchReq = async () => {
try {
const result = await axios.request({
method: 'get',
url: `https://developers.zomato.com/api/v2.1/search?city_id=280&q${this.state.search}&category=11`,
headers: {
'Content-Type': 'application/json',
'user-key': 'a31bd76da32396a27b6906bf0ca707a2'
}
});
this.setState({ data: result.data.restaurants });
} catch (error) {
this.setState({ data: [] });
console.log(error);
}
}
render() {
const { search } = this.state;
return (
<View>
<View style={styles.header}>
<Image source={Logo} style={{ resizeMode: 'stretch', width: 50, height: 50, alignSelf: 'center', justifyContent: 'center', marginTop: 30 }} />
<Icon
raised
name='location'
type='octicon'
color='#f50'
onPress={() => this.setState({ isModalVisible: !this.state.isModalVisible })}
containerStyle={{ alignSelf: 'flex-end', marginRight: 20, marginTop: -60 }} />
</View>
<SearchBar
placeholder="Type Here..."
onChangeText={this.updateSearch}
onSubmitEditing={this.searchReq}
value={search}
inputStyle={{ backgroundColor: 'steelblue', color: 'white' }}
inputContainerStyle={{ backgroundColor: 'steelblue', fontColor: 'white' }}
containerStyle={{ backgroundColor: 'steelblue', borderBottomColor: 'transparent', borderTopColor: 'transparent' }}
placeholderTextColor='white'
/>
{
this.state.isLoading ?
<View style={{ flex: 1, marginTop: 200 }}>
<ActivityIndicator style={{ color: 'red' }} />
</View> :
(
this.state.data.length == 0 ?
<View style={{ flex: 1, padding: 20, marginTop: 100 }}>
<Text style={{ color: '#000', fontWeight: 'bold' }}>No restaurants from selected category</Text>
</View> :
<View style={{ flexDirection: 'column' }}>
<FlatList
keyExtractor={item => item.id}
data={this.state.data}
renderItem={({ item }) =>
<TouchableOpacity onPress={() => console.log(item.restaurant.location.city)}>
<Card style={{ width: SCREEN_WIDTH }}>
<Image style={{ width: SCREEN_WIDTH / 3, height: 130 }} resizeMode="stretch" source={{ uri: item.restaurant.thumb }} />
<Text style={{ color: '#000', fontWeight: 'bold' }}>{item.restaurant.name} </Text>
</Card>
</TouchableOpacity>
}
/>
</View>
)
}
</View>
)
}
}
const styles = StyleSheet.create({
header: {
backgroundColor: '#ff4714',
height: SCREEN_HEIGHT / 8,
},
});
도움이 되었기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다