獲取我陣列中的數據

Question

我想借助Twitch Api製作流應用程序。我使用React和Redux。這是我嘗試用redux創建的第一個真正的應用程序，所以我可能會錯過一些東西。

問題是我可以看到與反應devtools我有我的道具裏面有20個對象的流。我可以使用JSON.stringify可視化，但不能執行映射或for循環，因爲我無法使用長度。當我嘗試繪製地圖時，我得到的地圖不是一個函數。

streamReducer.js

import * as types from '../constants/'; 
/*>>>>>>=============================================<<<<<<*/ 
const streamReducer = (streams = { isFetched: false }, action) => { 
    switch (action.type) { 
     case `${types.RECEIVE_STREAMS}_PENDING`: 
      return {}; 
     case `${types.RECEIVE_STREAMS}_FULFILLED`: 
      return { 
       streams: action.payload, 
       err: null, 
       isFetched: true 
      }; 
     case `${types.RECEIVE_STREAMS}_REJECTED`: 
      return { 
       streams: null, 
       err: action.payload, 
       isFetched: true 
      }; 
     default: 
      return streams; 
    } 
}; 
/*>>>>>>=============================================<<<<<<*/ 
export default streamReducer; 

StreamApp.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
/*>>>>>>=============================================<<<<<<*/ 

import StreamsList from '../components/StreamsList'; 
/*>>>>>>=============================================<<<<<<*/ 

const StreamsApp = React.createClass ({ 
    render() { 
     return (
      <div> 
       Streaming 
       <StreamsList {...this.props.stream} /> 
      </div> 
     ); 
    } 
}); 

const mapStateToProps = (state) => ({ stream: state.stream }); 

/*>>>>>>=============================================<<<<<<*/ 

export default connect(mapStateToProps)(StreamsApp); 

routeActions.js

import { 
     reqStreams 
    } from './streamActions'; 
    /*>>>>>>=============================================<<<<<<*/ 
    export const boundAllStreams = (nextState, replaceState) => reqStreams(nextState); 

個我的路線

import React from 'react'; 
import { Router, Route, IndexRoute } from 'react-router'; 
import { bindActionCreators } from 'redux'; 
/*>>>>>>=============================================<<<<<<*/ 

import { history } from '../store/configureStore'; 
import store from '../store/configureStore'; 
import * as routeActions from '../actions/routeActions'; 
/*>>>>>>=============================================<<<<<<*/ 

import App from '../containers/App'; 
import StreamsApp from '../containers/StreamsApp'; 
/*>>>>>>=============================================<<<<<<*/ 

import Home from '../components/layout/Home'; 
import Games from '../components/layout/Games'; 
import NoMatch from '../components/layout/NoMatch'; 
/*>>>>>>=============================================<<<<<<*/ 

const boundRouteActions = bindActionCreators(routeActions, store.dispatch); 

export default (
    <Router history={history}> 
     <Route path="/" component={App}> 
      <IndexRoute component={Home} /> 
      <Route path="streams" component={StreamsApp} onEnter={boundRouteActions.boundAllStreams}/> 
      <Route path="games" component={Games}/> 
      <Route path="*" component={NoMatch}/> 
     </Route> 
    </Router> 
); 

StreamsList.js

import React from 'react'; 
/*>>>>>>=============================================<<<<<<*/ 

const StreamsList = ({ streams }) => { 
    console.log(streams); 
    return (
     <div> 
      {JSON.stringify(streams)} 
      {streams.map((stream) => { 
       return (
        <div> 
         <h1>{stream.game}</h1> 
        </div> 
       ); 
      })} 
     </div> 
    ); 
}; 

export default StreamsList; 

在這裏你可以看到我得到了什麼，我們的JSON.stringify（流）

並與ReactDevTool

我的地圖錯誤

Answer 1

我正在寫一個答案，而不是繼續註釋中的談話，因爲這是很難在鍵入一個密閉空間;

請嘗試：

const StreamsList = ({ streams }) => { 
    console.log(streams); 
    streamArray = []; 
    if(streams){ 
     streamArray = streams.map((stream) => { 
      return (
       <div> 
        <h1>{stream.game}</h1> 
       </div> 
      ); 
     }); 
    } 

    return (
     <div> 
      {JSON.stringify(streams)} 
      {streamArray} 
     </div> 
    ); 
}; 

export default StreamsList; 

Answer 2

我找到了另一種方式。

StreamApp.js

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
/*>>>>>>=============================================<<<<<<*/ 

import StreamsList from '../components/StreamsList'; 
/*>>>>>>=============================================<<<<<<*/ 

const StreamsApp = ({ streams, err, isFetched }) => { 
    if (!isFetched) { 
     return <h1>Loading...</h1>; 
    } else if (err === null) { 
     return (
      <div> 
       Streaming 
       <StreamsList streams={streams} /> 
      </div> 
     ); 
    } else { 
     return <h1>Cannot find streams</h1>; 
    } 
}; 

const mapStateToProps = (state) => state.streams; 

/*>>>>>>=============================================<<<<<<*/ 

export default connect(mapStateToProps)(StreamsApp); 

StreamsList.js

import React from 'react'; 
import { Link } from 'react-router'; 
import { GridList } from 'material-ui/GridList'; // http://www.material-ui.com/#/components/grid-list 
/*>>>>>>=============================================<<<<<<*/ 
import StreamsListSingle from './StreamsListSingle'; 
/*>>>>>>=============================================<<<<<<*/ 

const StreamsList = ({ streams }) => { 
    return (
     <div style={styles.root}> 
      <GridList 
       cellHeigth={200} 
       cols={4} 
       style={styles.gridList}> 
       {streams.map((stream) => (
        <Link 
         to={`/streams/${stream.channel.name}`} 
          key={`${stream._id}_Link`} 
          params={stream.channel.name}> 
         <StreamsListSingle key={stream._id} {...stream} /> 
        </Link> 
       ))} 
      </GridList> 
     </div> 
    ); 
}; 

export default StreamsList; 

const styles = { 
    root: { 
     display: 'flex', 
     flexWrap: 'wrap', 
     justifyContent: 'space-around' 
    }, 
    gridList: { 
     width: 'max', 
     height: 'auto', 
     marginBottom: 24 
    } 
};