реагировать на выбранный объект, не могу показать, что я хочу - PullRequest
0 голосов
/ 22 июня 2019

Я хотел бы взять строку из 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 показано, что я хочу получить, но я не могу поместить его в переменную ...

enter image description here

класс poiDesc содержит весь массив.

1 Ответ

1 голос
/ 24 июня 2019

Ваш код работает, как задумано, потому что вы помещаете все свои объекты пути в тег img:

let poiPath = [];
...
poiPath.push(poiItem2);
...
<img className="poiDesc"
                    src={ poiPath } >
                </img>

Вы должны использовать состояние, чтобы получить / установить путь вашего изображения для синхронизации с вашим выбором:

<div className={classC} key={index} onClick={() => {
                    self.setState({
                        selectedPoi: poi,
                        selectedPath: poi.path
                    });
...
<img className="poiDesc"
                    src={ this.state.selectedPath } >
                </img>
...