2017-11-11 147 views
0

我一直在翻閱搜索結果和谷歌搜索追逐琥珀嬰兒撥浪鼓。我找不到任何使用React-Router -v 4.我正在構建一個簡單的(理論上講是簡單的)應用程序,它使用axios將用戶配置文件傳遞給Home組件,然後映射響應並顯示一組化身和名稱。這工作正常。問題是,我想點擊其中一個頭像,然後通過使用ID參數將與該頭像關聯的特定數據傳遞給新的單獨用戶頁面。所以點擊頭像打開用戶配置文件。我知道在react-router -v 4之前,似乎你實際上可以直接將一個方法傳遞給一個路由,但這對我來說不起作用。任何幫助都將極大地幫助我解決這個難題。通過路由或鏈接傳遞道具通過REDX(或更簡單的方式)通過路線或鏈接

行動

import axios from 'axios' 
const URI = '###' 

export function fetchUsers() { 
return function (dispatch) { 
    axios.get (URI) 
    .then ((response) => { 
    dispatch({ 
    type: 'FETCH_USERS_FULFILLED', 
    payload: response.data.users 
    }) 
}) 
    .catch ((err) => { 
    dispatch({ 
     type: 'FETCH_USERS_REJECTED', 
     payload: err 
    }) 
    }) 
    } 
    } 

減速

const initialState = { 
    users: [], 
    fetching: false, 
    fetched: false, 
    error: null 
} 

export default function reducer (state = initialState, action) { 
    switch (action.type) { 
    case 'FETCH_USERS_LOADING': { 
    return { 
     ...state, 
     fetching: true, 
     fetched: false, 
     users: action.payload 
    } 
    } 
    case 'FETCH_USERS_FULFILLED': { 
    return { 
     ...state, 
     fetching: false, 
     fetched: true, 
     users: action.payload 
    } 
    } 
    case 'FETCH_USERS_REJECTED': { 
    return { 
    ...state, 
    fetching: false, 
    error: action.payload 
    } 
    } 
} 

返回狀態 }

商店

import { applyMiddleware, createStore, compose } from 'redux' 
import { createLogger } from 'redux-logger' 
import thunk from 'redux-thunk' 
import reducers from '../reducers' 

const middleware = applyMiddleware(thunk, createLogger()) 

const store = createStore(
reducers, 
compose(middleware, window.devToolsExtension ? 
window.devToolsExtension() : f => f) 
) 

export default store 

首頁

import React, { Component } from 'react' 
import { connect } from 'react-redux' 
import Profile from '../Profile' 
import { fetchUsers } from '../redux/actions/userActions' 

class Home extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    } 
    } 

componentDidMount() { 
    this.props.fetchUsers(); 
} 

render() { 
    return (
    <div className={'view-wrapper'}> 
     <div className={'home-container'}> 
     {this.props.users.map((user, i) => 
      <Profile {...this.props} key={i} i={i} user={user}/> 
     )} 
     </div> 
    </div> 
    ) 
    } 
} 


const mapStateToProps = (state) => { 
    return { 
    users: state.user.users, 
    fetched: state.user.fetched, 
    error: state.user.error 
    } 
}; 
const mapDispatchToProps = (dispatch) => { 
    return { 
    fetchUsers:() => dispatch(fetchUsers()) 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Home); 

檔案

import React from 'react' 
import { Link } from 'react-router-dom' 

const Profile = (props) => (
    <div className='profile-container'> 
    <Link to={`/profile/${props.id}`}> 
    <img 
     src={props.avatar} 
     className={'user-avatar'} 
     alt={props.name} 
     /> 
    </Link> 
    </div> 
) 

    export default Profile 

路線

<Switch> 
    <Route exact path='/' component={Home} /> 
    <Route path='/profile/:id' component={Profile}/> 
</Switch> 

回答

1

你走了一半。您不需要將數據(道具)傳遞到單個用戶頁面,而是使用路徑中的ID,以便單個用戶頁面知道它所需的存儲區中的記錄。在您的個人用戶組件中:

const mapStateToProps = (state, props) => { 
    return { 
    user: state.user.users.find((user) => (user.id === props.match.params.id)) 
    }; 
}; 

然後,您可以在組件中訪問'user'作爲道具。

+0

我會盡力,謝謝你的快速回復。 –

+0

遺漏的類型錯誤:無法在Function.mapStateToProps讀的不確定 財產 '發現'[如mapToProps(bundle.js:35738) 在mapToPropsProxy(bundle.js:3912) 在Function.detectFactoryAndVerify(bundle.js:3921) 在mapToPropsProxy(bundle.js:3912) 在handleFirstCall(bundle.js:35130) 在pureFinalPropsSelector(bundle.js:35178) 在Object.runComponentSelector [按運行(bundle.js:3230) 在連接。 initSelector(bundle.js:3382) at new Connect(bundle.js:3323) at constructClassInstance(bundle.js:21071) –

+0

對不起 - 我應該更注意你現有的狀態 - 我已經編輯了答案 –