[英]React App JS - How to reference static JSON File
在 JS 中,我指的是遠程服務器上的文件,例如:
class App extends Component {
constructor(props) {
super(props);
let client = this.getParameterByName('client', window.url);
this.state = {
sidebarClass: 'open',
client: client ? client : 'abc-client',
specUrl: client
? `http://<remote-host>/${client}.json`
: '<remote-host>/abc-client.json',
};
this.showAPI = this.showAPI.bind(this);
this.toggleSidebar = this.toggleSidebar.bind(this);
}
getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
showAPI(specURL) {
this.setState({
specUrl: 'http://<remotehost>/' + specURL + '.json',
client: specURL,
});
}
toggleSidebar() {
this.setState((prevState) => ({
sidebarClass: prevState.sidebarClass === 'open' ? '' : 'open',
}));
}
render() {
return (
<div>
<Sidebar
showAPI={this.showAPI}
toggleClass={this.state.sidebarClass}
toggleSidebar={this.toggleSidebar}
client={this.state.client}
/>
<header className="header text-center">
<div className="text-right">
<div className="hamburger" onClick={this.toggleSidebar}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 30 30"
width="30"
height="30"
focusable="false">
<path
stroke="#c635d7"
strokeWidth="2"
strokeLinecap="round"
strokeMiterlimit="10"
d="M4 7h22M4 15h22M4 23h22"
/>
</svg>
</div>
<h3 className="heading text-center">{this.state.client}</h3>
</div>
</header>
<section className={`swagger-container ${this.state.sidebarClass}`}>
<Swagger specUrl={this.state.specUrl} />
</section>
</div>
);
}
}
現在,我想將它捆綁在 react 應用程序本身中(在本地提供服務),而不是遠程主機。 我知道該文件需要存在於公共文件夾中,但不明白如何在上面共享的 javaScript 中引用它。
您可以為此使用 fetch。 如果您的 xxx.json 位於公共文件夾的根目錄中,請使用:
const data = fetch('xxx.json');
但是為什么不直接把它放在 src/data 文件夾中並加載為:
import data from ‘./data/xxx.json’;
我認為第二種方法減少了對無用 http 請求的需求,並且還可能減少代碼的大小。
在下一個示例中,您可以看到數組定義為 DATA,它可以是 axios 或 fetch 請求后來自后端的響應。 您可以定義 DATA 來模擬對象或數組中的響應,就像您喜歡的那樣
import React, { useEffect, useState } from 'react';
import { View, Text, TextInput, StyleSheet, Dimensions, SafeAreaView, FlatList, TouchableOpacity, StatusBar } from 'react-native';
import ActionButton from 'react-native-action-button';
import Icon from 'react-native-vector-icons/FontAwesome';
import Header from '../../core/Header/Header';
import DismissKeyboard from '../../libs/DismissKeyboard';
const { width: WIDTH } = Dimensions.get('window');
import Guide from './Guide';
const styles = StyleSheet.create({
iconQr: {
fontSize: 36,
color: 'white',
},
inputContainer: {
marginTop: 10,
},
input: {
height: 45,
fontSize: 16,
paddingLeft: 45,
borderRadius: 10,
width: WIDTH - 55,
marginHorizontal: 25,
backgroundColor: '#FFFFFF',
},
container: {
flex: 1,
marginTop: StatusBar.currentHeight || 0,
},
});
const DATA = [
{
"empresa": "SHIPNOW",
"tipo_operacion": "ENTREGA",
"bultos": 1,
"sender_empresa": "SUCSHIPNOW",
"sender_remitente": "SHIPNOW",
"sender_direccion": "Av. de los Constituyentes 2985",
"sender_localidad": "CABA",
"sender_provincia": "CABA",
"sender_cp": 1428,
"comprador_apenom": "Lisandro Arguello",
"comprador_direccion": "Calle Jun\u00edn 2189",
"comprador_localidad": "Corrientes",
"comprador_provincia": "Corrientes",
"comprador_cp": 3400,
"usuario:": "shipnow",
"id:": 166308,
"zonaOrigen:": "AMBA",
"fecha_hora:": "2020-10-01 13:20:13",
"zona:": "NEA",
"confirmada:": 1,
"tipo_op:": 0,
"remito:": null,
"servicio:": "ENVIO ECOMMERCE",
"orden:": 1,
"rrId:": 61972,
"contrareembolso:": null,
"codigo_estado:": "011"
},
{ "empresa": "SHIPNOW", "tipo_operacion": "ENTREGA", "bultos": 1, "sender_empresa": "SUCSHIPNOW", "sender_remitente": "SHIPNOW", "sender_direccion": "Av. de los Constituyentes 2985", "sender_localidad": "CABA", "sender_provincia": "CABA", "sender_cp": 1428, "comprador_apenom": "Mellsa Picchio", "comprador_direccion": "Uruguay 1145", "comprador_localidad": "BBB", "comprador_provincia": "Corrientes", "comprador_cp": 3400, "usuario": "shipnow", "id": 165891, "zonaOrigen": "AMBA", "fecha_hora": "2020-09-30 07:24:41", "zona": "NEA", "confirmada": 1, "tipo_op": 0, "remito": null, "servicio": "ENVIO ECOMMERCE", "orden": 2, "rrId": 61973, "contrareembolso": null, "codigo_estado": "011" },
{ "empresa": "SHIPNOW", "tipo_operacion": "ENTREGA", "bultos": 1, "sender_empresa": "SUCSHIPNOW", "sender_remitente": "SHIPNOW", "sender_direccion": "Av. de los Constituyentes 2985", "sender_localidad": "CABA", "sender_provincia": "CABA", "sender_cp": 1428, "comprador_apenom": "Claudia Silva", "comprador_direccion": "Calle Playa Miramar 2754", "comprador_localidad": "Corrientes", "comprador_provincia": "Corrientes", "comprador_cp": 3400, "usuario": "shipnow", "id": 166152, "zonaOrigen": "AMBA", "fecha_hora": "2020-09-30 16:34:43", "zona": "NEA", "confirmada": 1, "tipo_op": 0, "remito": null, "servicio": "ENVIO ECOMMERCE", "orden": 3, "rrId": 61974, "contrareembolso": null, "codigo_estado": "011" },
{ "empresa": "SHIPNOW", "tipo_operacion": "ENTREGA", "bultos": 1, "sender_empresa": "SUCSHIPNOW", "sender_remitente": "SHIPNOW", "sender_direccion": "Av. de los Constituyentes 2985", "sender_localidad": "CABA", "sender_provincia": "CABA", "sender_cp": 1428, "comprador_apenom": "Claudia Silva", "comprador_direccion": "Azcuenga 1995", "comprador_localidad": "Corrientes", "comprador_provincia": "Corrientes", "comprador_cp": 3400, "usuario": "shipnow", "id": 166153, "zonaOrigen": "AMBA", "fecha_hora": "2020-09-30 16:34:43", "zona": "NEA", "confirmada": 1, "tipo_op": 0, "remito": null, "servicio": "ENVIO ECOMMERCE", "orden": 3, "rrId": 61974, "contrareembolso": null, "codigo_estado": "011" },
{ "empresa": "SHIPNOW", "tipo_operacion": "ENTREGA", "bultos": 1, "sender_empresa": "SUCSHIPNOW", "sender_remitente": "SHIPNOW", "sender_direccion": "Av. de los Constituyentes 2985", "sender_localidad": "CABA", "sender_provincia": "CABA", "sender_cp": 1428, "comprador_apenom": "Claudia Silva", "comprador_direccion": "Urquiza 2050", "comprador_localidad": "Corrientes", "comprador_provincia": "Corrientes", "comprador_cp": 3400, "usuario": "shipnow", "id": 166154, "zonaOrigen": "AMBA", "fecha_hora": "2020-09-30 16:34:43", "zona": "NEA", "confirmada": 1, "tipo_op": 0, "remito": null, "servicio": "ENVIO ECOMMERCE", "orden": 3, "rrId": 61974, "contrareembolso": null, "codigo_estado": "011" },
{ "empresa": "SHIPNOW", "tipo_operacion": "ENTREGA", "bultos": 1, "sender_empresa": "SUCSHIPNOW", "sender_remitente": "SHIPNOW", "sender_direccion": "Av. de los Constituyentes 2985", "sender_localidad": "CABA", "sender_provincia": "CABA", "sender_cp": 1428, "comprador_apenom": "Claudia Silva", "comprador_direccion": "Palmares Valley 50", "comprador_localidad": "Corrientes", "comprador_provincia": "Corrientes", "comprador_cp": 3400, "usuario": "shipnow", "id": 166155, "zonaOrigen": "AMBA", "fecha_hora": "2020-09-30 16:34:43", "zona": "NEA", "confirmada": 1, "tipo_op": 0, "remito": null, "servicio": "ENVIO ECOMMERCE", "orden": 3, "rrId": 61974, "contrareembolso": null, "codigo_estado": "011" },
]
function Delivieries({ navigation, route }) {
const [selectedId, setSelectedId] = useState(null);
const [guideNumber, setGuideNumber] = useState(null);
useEffect(() => route.params?.guideNumber && setGuideNumber(route.params?.guideNumber)
, [route.params?.guideNumber]);
const renderGuide = ({ item, index }) => {
console.log(item)
const backgroundColor = item.id === selectedId ? "#FFFFFF" : "#FFFFFF";
return (
<Guide
item={item}
index={index}
onPress={() => setSelectedId(item.id)}
style={{ backgroundColor }}
/>
);
};
return (
<>
<Header title="Entregas pendientes" isHome={false} />
<View style={{ marginTop: 25, marginLeft: 30, paddingBottom: 5 }}>
<Text>Ingresar número de ruta</Text>
</View>
<DismissKeyboard>
<View style={{ flex: 0.1, alignItems: 'center', justifyContent: 'center' }}>
<View style={styles.inputContainer}>
<TextInput
value={guideNumber}
onChangeText={(guideNumber) => setGuideNumber(guideNumber)}
placeholder="Número de ruta"
underlineColorAndroid="transparent"
placeholderTextColor="rgba(0,0,0,0.2)"
style={styles.input}
/>
</View>
</View>
</DismissKeyboard>
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderGuide}
keyExtractor={(item) => item.id}
extraData={selectedId}
/>
</SafeAreaView>
<ActionButton
buttonColor="rgba(231,76,60,1)"
renderIcon={() => <Icon name="qrcode" style={styles.iconQr} />}
onPress={() => navigation.navigate('Scanner')}
position="center"
size={55}
/>
</>
);
};
export default Delivieries;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.