1
リストコンポーネントのリンクをクリックすると、現在データを渡そうとしています。記事コンポーネントに行き、バックエンドのすべてのデータを表示します。私のリストコンポーネントは、私が望むデータを表示していますが、他の情報とともに記事コンポーネントに渡していません。それは何も表示されません。私は何が間違っていたのか分かりません。これは、react.jsとreduxを角度のある背景から使用することについて私が理解するための最後の基本的なステップです。react.jsの私のparamページにデータをルーティング
経路
<Router history={browserHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={HomePage}></IndexRoute>
<Route path="about" name="about" components={AboutPage}/>
<Route path="fashionlist" name="fashionlist" components={FashionList} /> // the list of data
<Route path="fashionarticle/:id" name="fashionarticle" components={FashionArticle}/> // what the click on the will go to
</Route>
</Router>
バックエンドからデータ
[{"_id":"58c71df9f7e4e47f1fe17eeb","article":"words words","author":"Jason","date":"1/2/2014","title":"my article","__v":0}, aka bunch more data]
アクションコンポーネント
import axios from "axios";
export function fetchArticle(cb) {
return function(dispatch) {
axios.get("http://localhost:3000/api/fashion")
.then((response) => {
dispatch({type: "FETCH_ARTICLES_FULFILLED", payload: response.data})
})
.catch((err) => {
dispatch({type: "FETCH_ARTICLES_REJECTED", payload: err})
})
if(cb != null){
cb()
}
}
}
リスト成分
import React from "react"
import { connect } from "react-redux"
import { Link } from 'react-router';
import { fetchArticle } from '../../actions/fashionActions';
@connect((store) => {
return {
articles: store.articles.articles,
};
})
export default class FashionArticle extends React.Component {
fetchArticle() {
this.props.dispatch(fetchArticle())
}
render() {
const { articles } = this.props;
if (!articles.length) {
return <button onClick={this.fetchArticle.bind(this)}>load Articles</button>
}
const mappedArticles = articles.map(article =>
<div>
<Link to={`fashionArticle/${article._id}`}>{article.title}</Link>
</div>
)
return <div>
<h1>List of Fashion Article</h1>
<ul>{mappedArticles}</ul>
</div>
}
}
記事コンポーネント//何らかの理由でデータを取得していない、エラーの内容や修正方法を確認できません。
import React from "react"
import { connect } from "react-redux"
import { browserHistory } from 'react-router';
export default class FashionArticle extends React.Component {
handleRedirect(){
browserHistory.push('/fashionlist');
}
render() {
//article array
const articles = this.props.route.article;
const id = this.props.params._id;
const article = articles.filter(article => {
if(article._id == _id) {
return article;
}
})
return(
<div>
<div class="jumbotron">
</div>
<h1>{article[0].title}</h1>
<h3>{article[0].author}</h3>
<p>{article[0].article}</p>
</div>
)
}
}