Реактивный компонент обновления google-distance-matrix

Question

Я супер новый, чтобы реагировать, я довольно младший.

Я играю вокруг API расстояния матрицы Google. пользователь вводит источник и назначение в форму, а обработчик события передает значения в матричную функцию, но внутри функции он не может обновлять переменные состояния.

Какие-нибудь мысли?

import React from 'react';  
import GoogleMap from 'google-distance-matrix';
class SimpleForm extends React.Component {
constructor(props) {
    super(props);
    this.state = { 
        address: '', 
        dest:'', 
        distanceText:'testing the distance text' 
    }
    this.handleFormSubmit = this.handleFormSubmit.bind(this);

    this.onChange = (address) => this.setState({ address });
    this.changeDest = (dest) => this.setState({dest});
}
handleFormSubmit = (event) => {
    event.preventDefault()        
    GoogleMap.matrix(this.state.address, this.state.dest, function (err, distances) {
        if (err) {
            return console.log(err);
        }
        if(!distances) {
            return console.log('no distances');
        }
        if (distances.status == 'OK') {
            if(distances.rows[0].elements[0])  {
                var distance = distances.rows[0].elements[0].duration['text'];
                this.setState({
                    foundDistance: true, 
                    distanceText: distance

                }); 
            }
        } 
    });

}

Answer 1

Привязка имеет большее снижение производительности, хотя и незначительное, чем простое кэширование this в переменной (что является довольно стандартным шаблоном).

Кроме того, используйте деструктуризацию на this.state,

handleFormSubmit = (event) => {
    const component = this
    const { address, dest } = this.state

    event.preventDefault()        

    GoogleMap.matrix(address, dest, function (err, distances) {
        if (err) {
            return console.log(err);
        }

        if(!distances) {
            return console.log('no distances');
        }

        if (distances.status == 'OK') {
            if(distances.rows[0].elements[0])  {
                var distance = distances.rows[0].elements[0].duration['text'];

                component.setState({
                    foundDistance: true, 
                    distanceText: distance
                }); 
            }
        } 
    });
}

Answer 2

"this" в GoogleMap.matrix не указывает на "this" компонента SimpleForm. Свяжите это:

...
GoogleMap.matrix(...)
...
).bind(this)