Question

我想要发生什么：我正在尝试向Google Places API发出请求，目前我抓住了用户输入（onChange）并将请求发送出去。当谷歌地方的回复回来时，我期待一系列的地方。有了那个地方，我想把我的景点状态更新到地方的响应数组。

我的代码：

import React, {Component} from 'react';
import axios from 'axios';

class Search extends Component {
    constructor(props) {
        super(props);

        this.state= {
            sights: 'cat',
            city:''
        }
    }

    onInputChange(city) {
        this.setState({city});
        this.handleSubmit(city);
    }

    handleSubmit(event) {
        axios.get(
            "https://maps.googleapis.com/maps/api/place/textsearch/json?query=attractions+in+" +
            this.state.city +
            "&key=AIzaSyC5d4W-ei6o_C3eCrnJl24nuaeuAemhoJQ",
                    {
                    mode: "no-cors",
                    header: {
                        "Access-Control-Allow-Orgin": "http://localhost:8080",
                        "Content-Type": "application/json",
                        "Access-Control-Allow-Headers":
                        "Origin, X-Requested-With, Content-Type, Accept"
                    },
                    withCredentials: true,
                    credentials: "same-origin"
                    }
                )
                .then((res) => console.log(res.data.results))
                .then((res) => {
                    this.setState({ sights: res.data.results });
                })
                .then(console.log('got here'))
                .catch(function(err) {
                    console.log("err", err);
                })
        }
    

    render(){
        return (
            <div>
            <h2>{this.state.city}</h2>
            <h4>{this.state.sights}</h4>
            <input 
                value={this.state.city}
                onChange={(event)=> this.onInputChange(event.target.value)} /> 
            </div>
        )
    }
}

export default Search;

我正在测试的内容：

.then((res) => console.log(res.data.results))
                    .then((res) => {
                        this.setState({ sights: res.data.results });
                    })
                    .then(console.log('got here'))

拨打谷歌电话后我的控制台：

（20）[{...}，{...}，{...}，{...}，{...}，{...}，{...}，{...}，{...}，{...}，{...} ，{...}，{...}，{...}，{...}，{...}，{...}，{...}，{...}，{...}]

错误TypeError：无法读取未定义的属性“数据” 在eval（Search.jsx：63）

来到这里

所以在我的console.log res.data.results之后，我得到了我想要的谷歌地方数组。

使用该数组我想将它分配给我的景点状态但我得到的类型错误是无法读取未定义的'data'的属性。这对我来说没有意义，因为我在console.log res.data.results并找回了一个数组。我也检查了响应对象，并且有一个名为data的属性。

有什么想法吗？

Answer 1

你在追逐承诺。

这一行

.then((res) => console.log(res.data.results))

将返回undefined，由链中的下一个then()处理。

所以将其改为

.then((res) => { console.log(res.data.results)); return res })

反应axios请求。 setState无法读取响应对象

1 个答案: