Question

无法弄清楚为什么数组长度未定义

2019-05-10

491

reactjs axios

我的控制台中不断收到以下消息：“未捕获（在承诺中）TypeError：无法读取未定义的属性‘length’”

quotesData.quotes 应该是数组的键，因此我不确定为什么它的 length 属性未定义。

quotesData 应该是一个 JSON 对象，如下所示：{“quotes”：[Object1, Object2, ...etc.]

我使用 axios 的方式有问题吗？我对编程还很陌生，对 react.js 也很陌生

getQuote() {
    let _this = this;
    _this.serverRequest =
        axios
        .get("https://raw.githubusercontent.com/dwgillette/quotes/master/library")
        .then(function(quotesData) { 
            console.log(quotesData);
            let newQuote = quotesData.quotes[Math.floor(Math.random() * quotesData.quotes.length)];
            _this.setState({
                quote: newQuote.quote,
                author: newQuote.author
            });
        })
}

Answer 1

因此，您想要的数据实际上将位于响应的 .data 属性中。因此，如果您像这样修复代码，您就可以开始了 :)

getQuote() {
    let _this = this;
    _this.serverRequest =
        axios
        .get("https://raw.githubusercontent.com/dwgillette/quotes/master/library")
        .then(function(q) { 
            quotesData = q.data;
            console.log(quotesData);
            let newQuote = quotesData.quotes[Math.floor(Math.random() * quotesData.quotes.length)];
            _this.setState({
                quote: newQuote.quote,
                author: newQuote.author
            });
        })
}

Answer 2

因为承诺解析为响应对象。尝试执行以下操作：

getQuote() {
let _this = this;
_this.serverRequest =
    axios
    .get("https://raw.githubusercontent.com/dwgillette/quotes/master/library")
    .then(function(response) { 
        let newQuote = response.data.quotes[Math.floor(Math.random() * response.data.quotes.length)];
        _this.setState({
            quote: newQuote.quote,
            author: newQuote.author
        });
    })
}

Answer 3

这是您返回的响应对象的屏幕截图。

我重构了您的代码以使其正常工作。您需要使用 res.data。

getQuote = () => {axios.get("https://raw.githubusercontent.com/dwgillette/quotes/master/library")
.then(res => {
  let newQuote =
    res.data.quotes[Math.floor(Math.random() * res.data.quotes.length)];

  this.setState({
    quote: newQuote.quote,
    author: newQuote.author
  });
});
};