javascript - 将数据路由到react.js 中的我的参数页面

Question

我目前正在尝试传递我的数据，当您单击列表组件上的链接时，它将转到文章组件，在其中显示来自后端的所有数据。我的列表组件正在工作，它显示了我想要的数据，但它没有将其与其余信息一起传递给文章组件。它没有显示任何东西。我不确定我做错了什么。这是我了解如何使用来自有 Angular 背景的react.js 和 redux 的最后一个基本步骤。

路线

<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]

Action 组件

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>

        )
    }
}

Answer 1

我没有看到任何可以将文章传递到页面的内容。

尝试 this.props.params.id(无下划线)来获取您应显示的文章的 ID。

然后从商店获取正确的文章 - this.props.articles[X](假设这是一个数组而不是 map )。

或者，我相信您也可以在链接本身上传递参数，但我不会推荐它，因为您可能在该页面上有很多链接。

<Link params={{ testvalue: "hello" }} />