通过路由或链接传递道具通过REDX(或更简单的方式)通过路线或链接
问题描述:
我一直在翻阅搜索结果和谷歌搜索追逐琥珀婴儿拨浪鼓。我找不到任何使用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>
答
你走了一半。您不需要将数据(道具)传递到单个用户页面,而是使用路径中的ID,以便单个用户页面知道它所需的存储区中的记录。在您的个人用户组件中:
const mapStateToProps = (state, props) => {
return {
user: state.user.users.find((user) => (user.id === props.match.params.id))
};
};
然后,您可以在组件中访问'user'作为道具。
我会尽力,谢谢你的快速回复。 –
遗漏的类型错误:无法在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) –
对不起 - 我应该更注意你现有的状态 - 我已经编辑了答案 –