Question

我最近一直在尝试在React.js中使用API，我相信以下代码基于https://reactjs.org/docs/faq-ajax.html的教程可以正常工作，但是当我运行此代码时，我不断得到

TypeError：无法读取未定义的属性“ map”

下面是我的代码，这是一个称为DOTA的组件，并已导出到我的App.js

import React from 'react';

const API_KEY ="some-api-key";
const DEFAULT_QUERY = 'redux';

class DOTA extends React.Component {
    constructor(props) {
    super(props);

    this.state = {
      error: null,
      isLoaded: false,
      info: [],
    };
  }

  componentDidMount() {
    fetch(API_KEY + DEFAULT_QUERY)
      .then(response => response.json(console.log(response)))
     .then((result) => {
     console.log(result)    
          this.setState({
            isLoaded: true,
            info: result.info
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }



render() {
const { error, isLoaded, info } = this.state;
if (error) {
  return <div>Error: {error.message}</div>;
} else if (!isLoaded) {
  return <div>Loading...</div>;
} else {
  return (
    <ul>
      {this.props.info.map(item => (
        <li key={ item.all_word_counts}>

        </li>
      ))}
    </ul>
  );
}
  }
}

export default DOTA

App.js

import React, { Component } from 'react';
import DOTA from './components/DOTA/DOTA'
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
       <DOTA  />
      </div>
    );
  }
}

export default App;

我已经在这里寻找答案，但似乎找不到同样问题的人。我是否需要在JSX之外运行 .map（）？在渲染上方？还是我只是想念一些东西？

谢谢！

Answer 1

DOTA组件未获得任何props，但您正尝试在map上使用this.props.info。实际上，您是在渲染状态的顶部破坏info。

这是如何工作的。 info处于状态，您将其破坏为：

const { error, isLoaded, info } = this.state;

这会从状态中抓取error，isLoaded和info并为其分配变量。因此，您可以使用info代替this.state.info。实际上，您像在error块的顶部一样使用if。

因此，请在相关部分中使用它，例如：

<ul>
      {info.map(item => (
        <li key={ item.all_word_counts}>

        </li>
      ))}
</ul>

但是，使用您当前的代码，您的li内没有任何值。希望您现在正在测试。

评论后更新

您的问题似乎与数据获取有关。只要您的状态为info为空，就不能取消定义此值并且您的地图可以正常工作。这通常就是我们避免那些map of undefined错误的方式。如果我们不能有一个空状态，那么我们将进行条件渲染。

如果要测试这种情况，只需注释掉您的componentDidMount方法并尝试代码。有用。当然会说Loading，因为您没有将其设置为true。如果您将其手动设置为true，则会看到空白页，但不会显示错误。

这是您的代码的有效示例，但需要另一个提取： https://codesandbox.io/s/q9jx3ro7y9

因此，您应该调试fetch。

TypeError：无法读取未定义的ReactJS API调用的属性“ map”

1 个答案: