Question

我一直在翻阅搜索结果，并像一个追逐那个琥珀色婴儿拨浪鼓的瘾君子谷歌搜索。我发现没有使用React-Router -v 4.我正在构建一个简单的（理论上简单的lol）应用程序，它使用axios将用户配置文件传递给Home组件，然后映射响应并显示一系列化身和名称。这很好用。问题是，我想点击其中一个头像，然后使用id参数将与该头像相关联的特定数据传递到新的个人用户页面。所以点击头像打开用户个人资料。我知道在react-router -v 4之前，你似乎实际上只是将一个方法直接传递给一个路由，但这对我不起作用。任何帮助都会帮助我解决这个难题。

动作

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>

Answer 1

你在那里的一半。您不需要将数据（道具）传递到单个用户页面，而是使用路径中的ID，以便单个用户页面知道它想要的商店中的记录。在您的个人用户组件中：

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

然后您就可以访问用户＆＃39;作为组件中的道具。

通过路线或链接

1 个答案: