Return to Revisions

The localhost api can not be fetched from the expo.

const search = async(type) => { let response = await fetch(http://localhost:3000/api/${type}, { accept: 'application/json' }); let result = await response.json(); return result; }

const create = async(type, data) => { let response = await fetch(http://localhost:3000/api/${type}, { headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, method: 'post', body: JSON.stringify(data) }); let result = await response.json(); return result; }

const Client = {search, create}; export default Client;

Client.js

const search = async(type) => {
let response = await fetch(`http://localhost:3000/api/${type}`, {
 accept: 'application/json'
});
let result = await response.json();
return result; }
const create = async(type, data) => {
let response = await fetch(`http://localhost:3000/api/${type}`, {
 headers: {
 'Accept': 'application/json',
 'Content-Type': 'application/json'
 },
 method: 'post',
 body: JSON.stringify(data)
});
let result = await response.json();
return result;
}
const Client = {search, create};
export default Client;

App.js

import React, { Component } from 'react';
import {
 Text,
 View,
 TextInput,
 Button,
 StyleSheet
} from "react-native";
import Client from './Client.js';
class App extends Component {
 constructor() {
 super()
 this.state = {
 users: [] // user에 대한 정보를 담기 위한 state
 }
 this.handleUserInputChange = this.handleUserInputChange.bind(this)
 }
 componentWillMount = () => {
 this.getUser()
 }
 handleUserInputChange = event => {
 const {target: {name, value}} = event
 this.setState({
 [name]: value
 });
 }
 getUser = async() => {
 Client.search('User') // Client.js에서 
 .then(data => {
 this.setState({
 users: data 
 })
 })
 }
 submitUser = () => {
 const data = {
 "$class": "org.acme.model.User",
 "phonenumber": this.state.phonenumber,
 "email": this.state.email,
 "firstName": this.state.firstName,
 "lastName": this.state.lastName,
 }
 Client.create('User', data)
 .then(() => {
 this.getUser()
 })
 }
 render() {
 return(
 <View className="App">
 <Text>Add User</Text>
 <Text>phonenumber:</Text>
 <TextInput 
 onChange={this.handleUserInputChange}
 type="text"
 name="phonenumber" />
 <Text>email:</Text>
 <TextInput
 onChange={this.handleUserInputChange}
 type="text"
 name="email" />
 <Text>firstName:</Text>
 <TextInput 
 onChange={this.handleUserInputChange}
 type="text"
 name="firstName" />
 <Text>lastName:</Text>
 <TextInput 
 onChange={this.handleUserInputChange}
 type="text"
 name="lastName" />
 <Button title="New User" onPress={()=> this.submitUser}/>
 
 <View style={styles.container}>
 <Text style={styles.userlist}>
 User List
 </Text>
 {this.state.users.map((r, i) => (
 <View style={styles.userstate}
 key={i}>
 <Text>phonenumber: {r.phonenumber}</Text>
 <Text>email: {r.email}</Text>
 <Text>firstName: {r.firstName}</Text>
 <Text>lastName: {r.lastName}</Text>
 </View>
 ))}
 </View>
 </View>
 )
 }
}
const styles=StyleSheet.create({
 container: {
 flex:1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 userlist:{
 fontSize: 20,
 textAlign: 'center',
 margin: 10,
 },
 userstate:{
 textAlign: 'center',
 color: '#333333',
 marginBottom: 5,
 },
});
export default App;