Проблема . Как обновить раскрывающееся меню после выбора?

Извините, если этот вопрос прост, но я пробовал много разных способов заставить его работать. Я создаю лодочный визуализатор с использованием API-интерфейсов AISHub. После запроса API я могу получить файл json с интересующими меня судами, ввести эти сосуды в таблицу и показать их маркер на google-map. Теперь некоторые суда выполняют некоторые функции, другие делают что-то еще, и я пытаюсь отфильтровать это с помощью меню dropdown.

Ниже самая важная часть кода:

< Сильный > GoogleMap.js :

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: []
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

    componentDidMount() {
        this.countDownInterval = setInterval(() => {
            if (!this.state.buttonClickedAt) return;
            const date = new Date();
            const diff = Math.floor((date.getTime() - this.state.buttonClickedAt.getTime()) / 1000);

            if (diff < 90) {
                this.setState({
                    progress: diff,
                    buttonEnabled: false
                });
            } else {
                this.setState({
                    progress: 0,
                    buttonClickedAt: null,
                    buttonEnabled: true
                });
            }
        }, 500);
    }

    componentWillUnmount() {
        clearInterval(this.countdownInterval);
    }

    async updateRequest() {
        const url = 'http://localhost:3001/hello';
        console.log(url);
        const fetchingData = await fetch(url);
        const ships = await fetchingData.json();

        console.log(ships);

        this.setState({
            buttonEnabled: false,
            buttonClickedAt: new Date(),
            progress: 0,
            ships
        });
        setTimeout(() => {
            this.setState({ buttonEnabled: true });
        });
    }

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{ key: 'My_KEY' }}
                    center={{
                        lat: 42.4,
                        lng: -71.1
                    }}
                    zoom={8}
                >
// This will render the customized marker on Google-Map
                    {this.state.ships.map((ship) => (
                        <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE} />
                    ))}
// This is the dropdown I am trying to update
                    <select className="combo-companies">
                        <option value="All">All</option>
                        <option value="research">research</option>
                        <option value="exploration">exploration</option>
                        <option value="navigation">navigation</option>
                        <option value="drilling">drilling</option>
                    </select>
                </GoogleMapReact>
            </div>
        );
    }
}

< Сильный > ShipTracker.js

const Ship = ({ ship }) => {
    const shipName = ship.NAME;
    const company = shipCompanyMap[shipName];

    const shipImage = companyImageMap[company];
    return (
        <div>
            {/* Render shipImage image */}
            <img src={shipImage} alt="Logo" />
        </div>
    );
};
export { Ship };

const ShipTracker = ({ ships }) => {
    const handleRowClick = (rowValue) => {
        console.log(rowValue);
    };
    return (
        <div className="ship-tracker">
            <Table className="flags-table" responsive hover>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Callsign</th>
                        <th>Heading</th>
                        <th>SOG</th>
                        <th>IMO</th>
                        <th>MMSI</th>
                        <th>Longitude</th>
                        <th>Latitudee</th>
                    </tr>
                </thead>
                <tbody>
                    {ships.map((ship, index) => {
                        const { IMO, NAME, CALLSIGN, HEADING, SOG, MMSI, LONGITUDE, LATITUDE } = ship;
                        const cells = [ NAME, CALLSIGN, HEADING, SOG, IMO, MMSI, LONGITUDE, LATITUDE ];
                        return (
                            <tr onClick={() => handleRowClick(ship)} key={index}>
                                <th scope="row">{index}</th>
                                {cells.map((cell) => <td>{cell}</td>)}
                            </tr>
                        );
                    })}
                </tbody>
            </Table>
        </div>
    );
};

export default ShipTracker;

Что я уже сделал?

1) После расследования я нашел этот источник, который Было полезно понять концепцию выбора. Этот вопрос остался без ответа, и он задавался вопросом, должны ли функции componentWillMount и componentWillReceiveProps быть реализованы или есть какой-то дополнительный способ.

2) Этот пост тоже был полезен, но меня немного смутило, так как кажется, что setState должен быть дополнительной функцией для реализации.

3) По здесь кажется, что {{X0} } должен быть предоставлен в функции обработчика. Хотя полезно, я думаю, что этот пост является суммой пункта 1) + 2).

Я знаю, что это простой пример, но я пытался понять основную концепцию, как обновить простой dropdown, прежде чем переходить к чему-то более среднему или продвинутому. Спасибо за указание в правильном направлении для решения этой проблемы.

1
Emanuele 11 Фев 2020 в 19:40

2 ответа

Лучший ответ

Итак, вы хотите отфильтровать отображаемых создателей на карте относительно варианта, выбранного пользователем в раскрывающемся списке.

Вы можете изменить имя type на то, что вы хотите. Введите одно из выпадающих значений (все, исследование, разведка, навигация или бурение).

Я не проверял следующий код, но он должен работать!

class BoatMap extends Component {
    constructor(props) {
        super(props);
        this.state = {
            buttonEnabled: true,
            buttonClickedAt: null,
            progress: 0,
            ships: [],
            type: 'All'
        };
        this.updateRequest = this.updateRequest.bind(this);
        this.countDownInterval = null;
    }

    componentDidUpdate(prevProps, prevState) {
        if (this.state.type !== prevState.type) {
            // The user has selected a different value from the dropdown
            // To get this value: this.state.type
            // do anything you want here...
            console.log('dropdown value changed for ' + this.state.type);
        }
    }

    handleChange = e => {
        this.setState({
            type: e.target.value
        });
    };

    render() {
        return (
            <div className="google-map">
                <GoogleMapReact
                    bootstrapURLKeys={{key: 'My_KEY'}}
                    center={{
                        lat: 42.4,
                        lng: -71.1
                    }}
                    zoom={8}
                >
                    {this.state.ships.filter(ship => ship.type === this.state.type).map((ship) => (
                        <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE}/>
                    ))}

                    <select className="combo-companies" value={this.state.type} onChange={this.handleChange}>
                        <option value="All">All</option>
                        <option value="research">research</option>
                        <option value="exploration">exploration</option>
                        <option value="navigation">navigation</option>
                        <option value="drilling">drilling</option>
                    </select>
                </GoogleMapReact>
            </div>
        );
    }
}
1
Guicara 11 Фев 2020 в 17:37
filter(ship => ship.type === this.state.type)

Я использовал ship.type в качестве примера. Есть ли у вас свойство типа на вашем объекте Ship?

Редактировать:

render() {
    // All the ships
    const ships = this.state.ships;

    // Debug
    console.log('this.state.type: ' + this.state.type);

    // Only the ships matching the dropdown selected value
    const filteredShips = ships.filter(ship => {
        console.log('ship.shipImage: ' + ship.shipImage);

        if (ship.shipImage !== this.state.type) {
            console.log('ship.shipImage does not match the filtered value');
        }

        return ship.shipImage === this.state.type;
    });

    // Debug
    console.log(ships);
    console.log(filteredShips);

    return (
        <div className="google-map">
            <GoogleMapReact
                bootstrapURLKeys={{key: 'My_KEY'}}
                center={{
                    lat: 42.4,
                    lng: -71.1
                }}
                zoom={8}
            >
                {filteredShips.map((ship) => (
                    <Ship ship={ship} key={ship.CALLSIGN} lat={ship.LATITUDE} lng={ship.LONGITUDE}/>
                ))}

                <select className="combo-companies" value={this.state.type} onChange={this.handleChange}>
                    <option value="All">All</option>
                    <option value="research">research</option>
                    <option value="exploration">exploration</option>
                    <option value="navigation">navigation</option>
                    <option value="drilling">drilling</option>
                </select>
            </GoogleMapReact>
        </div>
    );
}
1
Guicara 11 Фев 2020 в 19:06