Я хотел бы взять строку из json в моем компоненте реакции.
путь (строка), чтобы вызвать мое изображение и поместить его в мое веб-приложение.
дело в том, когдая называю это img он вызывает весь мой массив.не только выбранный.
как я могу это сделать?
вот мой код:
import React, { Component } from 'react';
import './poiList.css';
// Composant react affichant la liste des points d'intérêts
// C'est ce composant qui communique avec l'extension POI
class PoiList extends Component {
constructor(props) {
super(props);
this.state = {
poi: [],
selectedPoi: undefined,
settings: {
defaultPointColor: [61, 183, 255],
selectedPointColor: [37, 27, 255],
defaultPointTransparancy: 0.4,
spriteScaleFactor: 0.8,
//altitude par défaut
spriteAltitude: 15.0
}
};
}
componentDidMount() {
fetch('/settings')
.then(response => {
if (!response.ok) {
console.log(`status ${response.status}`);
throw new Error(`status ${response.status}`);
}
return response.json();
})
.then(json => {
this.setState({
settings: json
});
})
.catch(e => {
console.log(`Settings call failed: ${e}`);
this.setState({
message: `Settings call failed: ${e}`
});
})
fetch('/poi')
.then(response => {
if (!response.ok) {
console.log(`status ${response.status}`);
throw new Error(`status ${response.status}`);
}
return response.json();
})
.then(json => {
this.setState({
poi: json.poi
});
})
.catch(e => {
console.log(`POI call failed: ${e}`);
this.setState({
message: `POI call failed: ${e}`
});
});
}
render() {
if(this.props.poiExtension !== undefined) {
this.props.poiExtension.clearAllPOI();
this.props.poiExtension.setSettings(this.state.settings);
}
let self = this;
let poiList = [];
let poiPath = [];
let index = 0;
this.state.poi.map((poi) => {
if(this.props.poiExtension !== undefined) {
this.props.poiExtension.createPOI(poi, this.state.selectedPoi === poi);
}
let colorState = index % 2 === 1 ? "white" : "";
colorState = this.state.selectedPoi === poi ? "selected" : colorState;
let classC = "poiEntry " + colorState;
let poiItem = (
<div className={classC} key={index} onClick={() => {
self.setState({
selectedPoi: poi,
});
****** *******console.log(poi.path);*************
}}>
{poi.type} ({poi.x}, {poi.y}, {poi.z})
</div>
);
index++;
let poiItem2 = (
<div className={classC} key={index} onClick={() => {
self.setState({
selectedPoi: poi,
});
console.log(poi.path);
}}>
{poi.path}
</div>
);
poiList.push(poiItem);
poiPath.push(poiItem2);
})
return(
<div className="fullscreen">
<div className="poiTitle">BATIMENT E17</div>
<div className="poiList">
{ poiList }
</div>
<img className="poiDesc"
src={ poiPath } >
</img>
</div>
);
}
}
export default PoiList;
и теперь образец JSON
{
"points": [
{
"x" : 23000.0,
"y" : 7000.0,
"z" : 1200.0,
"type": "Défaut",
"path":"./frontend/public/image/1.PNG"
},
{
"x" : -2000.0,
"y" : -3000.0,
"z" : 1400.0,
"type": "Défaut",
"path":"./frontend/public/image/2.jpg"
},
{
"x" : 10000.0,
"y" : -3000.0,
"z" : 1400.0,
"type": "Défaut",
"path":"./frontend/public/image/3.jpg"
},
{
"x" : -2000.0,
"y" : 3000.0,
"z" : 1400.0,
"type": "Défaut",
"path":"./frontend/public/image/4.jpg"
},
{
"x" : 6000.0,
"y" : 6500.0,
"z" : 1400.0,
"type": "Défaut",
"path":"./frontend/public/image/5.jpg"
},
{
"x" : 13000.0,
"y" : 1000.0,
"z" : 1400.0,
"type": "Défaut",
"path":"./frontend/public/image/6.jpg"
},
{
"x" : 13000.0,
"y" : -15000.0,
"z" : 1400.0,
"type": "Défaut",
"path":"./frontend/public/image/7.jpg"
},
{
"x" :28000.0,
"y" : 0.0,
"z" : -1000.0,
"type": "Défaut",
"path":"./frontend/public/image/8.jpg"
}
]
}
Как я уже сказал, я могу вызвать все мои картинки за один раз, и я не знаю, как просто взять выбранный файл. В файле console.log показано, что я хочу получить, но я не могу поместить его в переменную ...
класс poiDesc содержит весь массив.