Question

我希望你能帮助我。我正在尝试使用axios / ReactJs将简单的TFL管API插入我的网页。

整合非常简单。我使用app.js然后使用功能组件，我将通过<li>来循环/映射数据并将我需要的信息提取到我的网页中。

但是，我的<Frame />组件中出现以下错误：

app.js:29827 Uncaught TypeError: Cannot read property 'map' of 
undefined at Frame (app.js:29827)

我不喜欢我在“Feed”上的映射方式。我不确定我错过了什么，因为这段代码通常适用于简单的API集成。

这是app.js

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import Frame from './components/Frame';
import 'bulma';


class App extends React.Component {

  constructor() {
    super();
    console.log('CONSTRUCTOR');

    this.state = {
      feed: []
    };
  }

 //pull through the TFL data
 componentDidMount() {
  console.log('tfl feed');
   axios.get('https://api.tfl.gov.uk/Line/Mode/tube/Status?detail=true&app_id=IVEREMOVEDAPIID&app_key=IVEREMOVEDAPIKEY')
  //response
  .then(res => {
    console.log(res);
    console.log(res.data);
    console.log(res.data[0].name);
    this.setState(
      { feed: res.data });
  });
  }


  render() {
    return(
      <section>
        <div>
          <h1>Tube Status</h1>
          <Frame />
        </div>
      </section>
     );
    }
   }


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

这是<Frame />模块，我正在进行映射：

import React from 'react';

const Frame = ({feed}) => {

return (

<section>
  <div className="columns is-multiline">
    <ul>
      {feed.map((tube, i) => <li className="column is-one-quarter" key={i}>
        {tube.name}
      </li>)}
    </ul>
  </div>
</section>
  );
};

export default Frame;

任何指针，都会很棒！

Answer 1

feed undefined因为您没有将道具传递给组件。请参阅渲染方法。

将饲料和平状态传递给Frame作为道具。

render() {
 return(
   <section>
     <div>
       <h1>Tube Status</h1>
       <Frame feed={this.state.feed}/>
     </div>
   </section>
  );
 }
}

ReactJs - API Feed Error - 无法读取map undefined的属性

1 个答案: