[英]showing response from reddit api in react-redux app
I am making a call to the reddit api from a react-redux app. 我正在从react-redux应用程序调用reddit api。 The response is coming from reddit and contains all the data.
响应来自reddit,包含所有数据。 It returns 25 posts, of which i am only able to show one on the front end.
它返回25个帖子,其中我只能在前端显示一个。 I believe it is because it is a nested array.
我相信是因为它是一个嵌套数组。
Can anyone see anything that I am doing incorrectly? 谁能看到我做错的任何事情?
Please see jsfiddle here. 请在这里查看jsfiddle。
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')
);
The returned response
is already an array. 返回的
response
已经是一个数组。 In your reducer, when you did state.concat([action.data])
it returns a nested array [Array[25]]
在减速器中,当执行
state.concat([action.data])
它将返回嵌套数组[Array[25]]
use state.concat(action.data)
then replace your var list
to this.props.data.map(function(item, i) { return (<li key={i}>{item.data.title}</li>) })
使用
state.concat(action.data)
然后将您的this.props.data.map(function(item, i) { return (<li key={i}>{item.data.title}</li>) })
var list
替换为this.props.data.map(function(item, i) { return (<li key={i}>{item.data.title}</li>) })
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.