在 react-redux 应用程序中显示来自 reddit api 的响应答案

【问题标题】：showing response from reddit api in react-redux app在 react-redux 应用程序中显示来自 reddit api 的响应
【发布时间】：2017-05-21 10:59:43
【问题描述】：

我正在从 react-redux 应用程序调用 reddit api。响应来自 reddit 并包含所有数据。它返回 25 个帖子，其中我只能在前端显示一个。我相信是因为它是一个嵌套数组。

谁能看到我做错了什么？

Please see jsfiddle here.

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, combineReducers } from 'redux';
import { connect, Provider } from 'react-redux';
import axios from 'axios';


function addData(state = [], action) {
    switch(action.type) {
        case 'ADD_DATA':
            var newState = state.concat([action.data]);
            return newState
        default:
            return state;
    }
    return state;
}

const store = createStore(addData);

class App extends React.Component {

    componentDidMount() {
        axios.get('https://www.reddit.com/r/reactjs/.json').then(response => {
            var response = response.data.data.children;
            store.dispatch({
                type: 'ADD_DATA',
                data: response
            });
            console.log('Response Returned Now');
        })      
    }

    render() {
        var list = this.props.data.map(function(item, i){
            return (<li key={i}>{item[i].data.title}</li>)
        })
        return (
            <ul>
                {list}
            </ul>
        )
    }
}

const mapStateToProps = function(store){
    return {
        data: store
    }
}

const ConnectedApp = connect(mapStateToProps)(App);
ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp />
  </Provider>
    , document.getElementById('app')
);

【问题讨论】：

标签： javascript ajax reactjs redux

【解决方案1】：

返回的response 已经是一个数组。在您的减速器中，当您执行 state.concat([action.data]) 时，它会返回一个嵌套数组 [Array[25]]

使用state.concat(action.data) 然后将您的var list 替换为this.props.data.map(function(item, i) { return (<li key={i}>{item.data.title}</li>) })

【讨论】：