ReactJs

Question

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

集成非常简单。我正在使用 app.js，然后是一个功能组件，我将在其中 loop/map 处理数据并通过 <li>s 将我需要的信息提取到我的网页中。

但是，我的 <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 因为你没有将道具传递给组件。查看您的渲染方法。

只需将 feed peace of state 作为道具传递给 Frame。

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

ReactJs - API Feed 错误 - 无法读取未定义的地图属性

ReactJs - API Feed Error - cannot read property of map undefined

api

axios

array.prototype.map

ReactJs - API Feed 错误 - 无法读取未定义的地图 属性

ReactJs - API Feed Error - cannot read property of map undefined

reactjs

api

axios

array.prototype.map

ReactJs - API Feed 错误 - 无法读取未定义的地图属性