Question

我正在制作一个投资组合。

中有作品列表

当我点击“了解更多”按钮时，我想转到另一个网址，向我显示有关该特定作品的更多信息。

为此，我想我需要从网址获取ID。

我试图使用AXIOS发出获取请求，但它无效......所以我决定重新开始。

有人可以帮助我吗？

操作/ index.js

export function workFetch(id) {

    return {
        type: 'WORK_FETCH',
        payload: request
    };

}

容器/ trabalhos.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Link } from 'react-router';


class Trabalhos extends Component {


renderList(){

    return this.props.trabalhos.map((trabalho) => {
        return(

            <li key={trabalho.id}>                 
                    <img src={trabalho.img} />
                    <p className="trabalho_titulo">{trabalho.title}</p>
                    <p className="trabalho_desc">{trabalho.descricao}</p>
                <Link to={"trabalhos/" + trabalho.id}>    
                    <a className="trabalho_saber_mais">Saber Mais</a>
                </Link>
            </li>

        );
    });
}


render(){

    return (

        <div>
            <div className="trabalhos">
                <div className="trabalhos_caixa">
                    <div className="row">
                        <div className="col-xs-12">
                            <ul className="no_pad">
                                {this.renderList()}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    );
}
}


function mapStateToProps(state){

    return {

        trabalhos: state.trabalho

    };
}



export default connect(mapStateToProps)(Trabalhos);

容器/ trabalhos_show.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class TrabalhosShow extends Component {

    render(){
        return (

            <div>

                <li>Show post: {this.props.params.id}</li>
                <li>Descrição: {this.props.params.descricao}</li>

            </div>

            )
    }

}

function mapStateToProps(state, props) {
  return {
    data: state.trabalho[props.params.id],
  };
}


export default connect(mapStateToProps)(TrabalhosShow);

减速

减速器/ index.js

import { combineReducers } from 'redux';
import TrabalhoPortofolio from './reducer_trabalhos';

const rootReducer = combineReducers({
    trabalho: TrabalhoPortofolio
});

export default rootReducer;

减速器/ reducer_trabalhos.js

export default function() {

    return [

        { id: 1, title: 'Miristica', tec: "Wordpress-Woocommerce", descricao: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", img: 'http://feiraalternativa.pt/wp-content/uploads/2016/04/Miristica-Bio-Cosm%C3%A9tica.png'},
        { id: 2, title: 'Teste', tec: "Wordpress-Woocommerce", descricao: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", img: 'https://pbs.twimg.com/profile_images/766360293953802240/kt0hiSmv.jpg'},

    ];

}

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import App from './components/app';
import Index from './components/index';
import Trabalhos from './containers/trabalhos';
import TrabalhosShow from './containers/trabalhos_show';

export default (
<Route path="/" component={App}>
    <IndexRoute component={Index} />
    <Route path="trabalhos" component={Trabalhos}/>
    <Route path="trabalhos/:id" component={TrabalhosShow} />
</Route>
);

目标是当我点击工作或在了解更多按钮时，我想根据ID转到单页。

我想显示该特定ID的信息。

感谢。

Answer 1

您需要将TrabalhosShow与Trabalhos类似。请注意，您也可以access the passed props in mapStateToProps，因此无需连接到整个州：

function mapStateToProps(state, props) {
  return {
    data: state.trabalho[props.params.id]
  };
}

export default connect(mapStateToProps)(TrabalhosShow);

实体将传递到道具data中的组件，例如this.props.data.title将返回标题。

React / Redux - 从Url ID

1 个答案: