获取搜索引擎结果页的未定义映射错误

Question

当它转移到我的Suggestion方法时，我一直收到这个错误。

未捕获类型错误：无法读取未定义的属性"map"建议第4行

有人能帮我找出原因吗？

我是个新手，请原谅我的无知。

import React from 'react';
const Suggestions = props => {
const options = props.results.map (r => (
<li key={r.id}>
{r.name}
</li>
));
return <ul className="ul-list">{options}</ul>;
};
export default Suggestions;

这是搜索栏的其余代码。我删除了api信息，但它就在那里。

import React, {Component} from 'react';
import axios from 'axios';
import Suggestions from '../SearchBbg/suggestions';
import '../../style/searchbar.scss';
const API_KEY = '';
const API_URL = '';
class Search extends Component {
state = {
query: '',
results: [],
};
getInfo = () => {
axios
.get (`${API_URL}?api_key=${API_KEY}&prefix=${this.state.query}&limit=7`)
.then (({data}) => {
this.setState ({
results: data.data,
});
});
};
handleInputChange = () => {
this.setState (
{
query: this.search.value,
},
() => {
if (this.state.query && this.state.query.length > 1) {
if (this.state.query.length % 2 === 0) {
this.getInfo ();
}
} else if (!this.state.query) {
}
}
);
};
render () {
return (
<form>
<input
className="search-bar"
placeholder="Search for..."
ref={input => (this.search = input)}
onChange={this.handleInputChange}
/>
<Suggestions results={this.state.results} />
</form>
);
}
}
export default Search;

Answer 1

我相信您已经在axios调用data属性中进行了析构函数。这可能就是为什么props.results得到undefined的原因。

因此，请尝试以下操作：

getInfo = () => {
axios
.get(`${API_URL}?api_key=${API_KEY}&prefix=${this.state.query}&limit=7`)
.then(({data}) => { // here already destructured
this.setState ({
results: data // removed => .data,
});
});
};

此外，在使用.map()之前，还值得检查null或undefined的值，如props.results && props.results.map()，因此您可以使用like来确保：

const Suggestions = props => {
const options = props.results && props.results.map (r => (
<li key={r.id}>
{r.name}
</li>
));
return <ul className="ul-list">{options}</ul>;
};

我希望这能澄清！

Answer 2

您的结果数组未定义。检查是否将结果作为道具传递给建议，以及结果数组是否未定义。

编辑：

似乎您正在为结果分配一些null或未定义的值，发生这种情况的唯一方法是在您的api响应上。检查您是否正确分析了服务器响应。