状态未在Google地图的React js中更新

时间:2018-11-15 14:00:18

标签: reactjs

我正在尝试使用从JSON接收到的对象来更新我的状态。在这里,我从JSON收到{lat,lng}。但是这些值不会在状态中更新。

toco \
    --graph_def_file=pola_retrained.pb \
    --output_file=mobilenet_v1_1.0_224.tflite \
    --input_format=TENSORFLOW_GRAPHDEF \
    --output_format=TFLITE \
    --inference_type=QUANTIZED_UINT8 \
    --inference_input_type=QUANTIZED_UINT8 \
    --input_array=Placeholder \
    --output_array=final_result \
    --input_shape=1,224,224,3\
    --default_ranges_min=0 \
    --default_ranges_max=6 \
    --mean_value=128 \
    --std_dev_values=128 \

1 个答案:

答案 0 :(得分:2)

在您的render方法中使用axios请求将使其在每个渲染上运行,并且由于this.state.latlng首先是nullthis.state.latlng.lat会给您带来错误。

您可以将axios请求移至componentDidMount,直到将latlng对象设置为您的状态后才呈现任何内容。

示例

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      place: "Hyderabad Telagnana",
      latlng: null
    };
  }

  componentDidMount() {
    axios
      .get(
        `https://maps.googleapis.com/maps/api/geocode/json?address=${this.state.place}&key=AIzaSyB6w_WDy6psJ5HPX15Me1-oE&libraries=places`
      )
      .then(res => {
        const postalCodes = res.data.results[0].geometry.location;
        this.setState({ latlng: postalCodes });
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    const { latlng } = this.state;

    if (latlng === null) {
      return null;
    }

    return (
      <div className="App">
        <MyMap lat={this.state.latlng.lat} lng={this.state.latlng.lng} />
      </div>
    );
  }
}