Javascript React/Redux-从Url ID获取详细信息

我正在做一个投资组合

我有一份我的工作清单

当我点击“了解更多”按钮时，我想转到一个不同的url，该url向我显示有关该特定工作的更多信息

为此，我想我需要从url获取ID

我试图使用AXIOS发出get请求，但它不起作用……所以我决定重新开始

有人能帮我吗

操作/index.js

export function workFetch(id) {

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

}

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);

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);

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

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

export default rootReducer;

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'},

    ];

}

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>
);

容器/trabalhos.js

export function workFetch(id) {

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

}

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);

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);

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

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

export default rootReducer;

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'},

    ];

}

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>
);

减速机/减速机\u trabalhos.js

export function workFetch(id) {

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

}

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);

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);

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

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

export default rootReducer;

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'},

    ];

}

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>
);

routes.js

export function workFetch(id) {

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

}

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);

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);

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

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

export default rootReducer;

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'},

    ];

}

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>
);

从“React”导入React；
从“react router”导入{Route，IndexRoute}；
从“./components/App”导入应用程序；
从“./components/Index”导入索引；
从“./containers/Trabalhos”导入Trabalhos；
从“/containers/trabalhos_show”导入trabalhos show；
导出默认值(
);

再次强调，目标是当我单击工作或“了解更多”按钮时，我希望根据ID转到单个页面

我想显示该特定ID的信息

---

谢谢。

您需要连接

Trabalhos show

类似于

Trabalhos

。请注意，您也可以这样做，因此无需连接到整个状态：

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

export default connect(mapStateToProps)(TrabalhosShow);

---

实体将在prop

数据中传递给您的组件，例如，
this.props.data.title
将返回标题。
您当前的问题到底是什么？似乎您已经在
TrabalhosShow
中获得了
id
？是的，我有id，但我想根据url中的id获取我的reducer中的其余信息。我想获取图片和描述等。当您现在单击“了解更多”按钮时，您的浏览器（也请参见浏览器控制台）会发生什么情况？我想我需要查看Url上的ID，进行获取，使用Axios即时通讯。谢谢你的帮助。但它不起作用，或者我不理解……我会在我的问题中更新我的trabalhos.show.js，让你看看我做错了什么。非常感谢您由于
数据：state.trabalho[props.params.id]
，您必须使用
此.props.data
访问实体。所以
this.props.params.descripcao
应该是
this.props.data.descripcao
。我知道，记录this.props来查看发生了什么通常很有帮助。inoyono，现在我可以得到this.props.params.descripao，但是所有的工作都是一样的，我想我需要根据url上的id来做。我正在试着和Axios打交道。但它也不起作用：（不确定您想要实现什么。正如您所说，您可以访问实体。此外，您可以通过
this.props.params.id
（URL中的id）访问您可能在GET请求中使用的id（如果这是您想要实现的）。是的，当我单击“了解更多”按钮时，我想基于该ID发出GET请求，而不是将我发送到或，并从该ID获取信息