Question

我正在尝试使用维基百科API。我正在使用Axios来请求数据。当我通过从App状态传递的道具进行地图绘制时，我收到以下错误：

Uncaught TypeError: search.map is not a function

我已检查过预期值是否为数组。看起来，我可以在react开发工具控制台中操纵它。它还有一个Array的原型，所以我很困惑为什么我不能这样做。

根组件：

class App extends React.Component
{
  constructor()
  {
    super();
    this.state = {search: {}}
    this.wikiSearch();
  }
  wikiSearch()
  {
    axios
      .get('https://en.wikipedia.org/w/api.php?action=opensearch&search="test"')
      .then ((result) => {
        result.data.shift();
        this.setState({search: result.data});
      });
    }
  render ()
  {
    return(
    <div id="container">
      <Header />
      <SearchBar />
      <SearchList search={this.state.search} />
    </div>
    );
  }
}
export default App;

使用来自App

的状态数据的组件

class SearchList extends React.Component
{
  render()
  {
    let search = this.props.search;
    search.map((element) => {

    });
    return(
      <div id='SearchList'>
      </div>
    );
  }
}

Answer 1

你需要在组件状态中将search初始化为空数组变量而不是对象，这样它就不会在调用map方法时抛出错误，如下所示：

this.state = {search: []}

不喜欢这样：

this.state = {search: {}}

React Uncaught TypeError：search.map不是函数

1 个答案: