Сделать условный запрос API на основе реквизита

Question

У меня есть минималистская целевая страница с двумя текстами и одним div, содержащим две кнопки.При нажатии на одну из этих кнопок я хочу отобразить компонент App с указанием местоположения, переданного как пропеллер, или по умолчанию, жестко закодированного в компонент App.

Я получил местоположение using GeoLocation API and window navigator и передал его в компонент App, если была нажата первая кнопка, как показано ниже:

if (this.state.shouldShowMain){
        return ( <App/> ) // no props
    } else if (this.state.shouldShowMainWithProps){
        const { lat, lng } = this.state.mLocation;
        return ( <App
            latitude={lat}
            longitude={lng} // props to App component
        />)
    }

мой объект состояния выглядит так:

this.state = {
        mLocation: {
            lat: '',
            lng: ''
        },
        isFromLocation: false,
        shouldShowMain: false,
        shouldShowMainWithProps: false
    };

и в компоненте приложения Iя пытаюсь провести различие между двумя состояниями, прежде чем сделать вызов API для извлечения маркеров следующим образом:

 componentDidMount() {

    if (this.props){
        const { latitude, longitude } = this.props;
        // console.log(this.props);

        fetch(
            // 'https://api.foursquare.com/v2/venues/search?ll= 12.917137,77.622791' +
            'https://api.foursquare.com/v2/venues/search?ll=' + latitude + ',' + longitude +
            '&query=atm&client_id=LVN4FEBT5Q0DBIQ2JOP4KYZ1LOEXREFRLOXV5UXAQWHUF14V' +
            '&client_secret=HZRYTMFJRS4N0R50IEZR04JXSO1KWVJWC015VTYLCCCG3C0U&v=20181101')
            .then(response => response.json())
            .then(data => {

                const atms = data.response.venues;
                const markers = atms.map( (item) => {
                    return {
                        lat: item.location.lat,
                        lng: item.location.lng
                    }
                });

                this.setState({
                    atms,
                    markers
                })
            })
            .catch(err => {
                this.setState({apiError: true});
                throw err;
            });
    } else {
        // no probs, fetching from silk board

        fetch(
            // 'https://api.foursquare.com/v2/venues/search?ll=' + latitude + ',' + longitude +
            'https://api.foursquare.com/v2/venues/search?ll= 12.917137,77.622791' +
            '&query=atm&client_id=LVN4FEBT5Q0DBIQ2JOP4KYZ1LOEXREFRLOXV5UXAQWHUF14V' +
            '&client_secret=HZRYTMFJRS4N0R50IEZR04JXSO1KWVJWC015VTYLCCCG3C0U&v=20181101')
            .then(response => response.json())
            .then(data => {

                const atms = data.response.venues;
                const markers = atms.map( (item) => {
                    return {
                        lat: item.location.lat,
                        lng: item.location.lng
                    }
                });

                this.setState({
                    atms,
                    markers
                })
            })
            .catch(err => {
                this.setState({apiError: true});
                throw err;
            });
    }

}

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

Это работает вобратный случай, поэтому вызовы API не работают.Как это исправить?Я готов отредактировать вопрос с учетом любых запрошенных деталей.Спасибо.

Исходя из хороших предложений, я получил, что проблема была решена наполовину.Теперь проблема заключается в отображении правильной карты из координат.Это моя реализация:

<div className="mapContainer">

                    <MapView
                        atms={this.state.atms},
                        markers={this.state.markers}
                        apiError={this.state.apiError}
                        filteredAtms={filteredAtms}/>
                </div>

, где реквизиты маркеров в MapView взяты из then in response from api, а в MapView component У меня есть эта реализация для центра маркера по умолчанию:

const MyCity = withGoogleMap(props => (
        <GoogleMap
            defaultCenter={{lat: 12.917137, lng: 77.622791}}
            defaultZoom={15}>

            {/*{<Marker position={{lat: 12.917137, lng: 77.622791}}/>}*/}

            {this.props.markers && this.props.markers.map( (marker, index) =>
                <Marker
                    key={index}
                    position={{lat: marker.lat, lng: marker.lng}}/>
             )}

        </GoogleMap>

    ));

Как мне это адаптировать?Должен ли я использовать тот же подход установки реквизита по умолчанию для этого компонента или другим способом.Спасибо.

Answer 1

Вы можете передать реквизиты по умолчанию, как упомянуто @ oliver.voron, или сделать что-то простое:

const latitude = this.props.latitude || 'defaultLatitude';
const longitude = this.props.longitude || 'defaultLongitude';

Answer 2

Вы можете визуализировать ваш App компонент следующим образом:

const { lat, lng } = this.state.mLocation;
return (
    <App latitude={lat} longitude={lng}/>
);

Затем в вашем App компоненте, если эти значения равны undefined, он вернется к значениям по умолчанию.

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            latitude: this.props.latitude || 123.45 // default value
            longitude: this.props.longitude || 456.78 // default value
        };
    }
    componentDidMount() {
        const { latitude, longitude } = this.state;
        fetch('https://api.foursquare.com/v2/venues/search?ll=' + latitude + ',' + longitude +
            // other code...
    }
}

Answer 3

Вы можете определить defualProps для компонента приложения, а затем, если вы не передадите широту и долготу компоненту, будут использоваться значения по умолчанию.

class App extends React.Component {
  render() {
    return (
      ...
    );
  }
}

App.defaultProps = {
    latitude: 12.917137,
    longitude: 77.622791,
}