Блог

Я использую react и redux для отображения списка элементов, когда пользователь нажимает «Просмотреть больше», они должны быть перенаправлены на другую страницу, где они смогут просмотреть информацию об одном элементе. Идентификатор передается правильно , но, к сожалению, вместо одного элемента возвращаются все элементы в списке. Что я делаю неправильно, любые советы или рекомендации о том, как я могу выполнить отправку действия с параметром onclick, будут оценены по достоинству.

Мое действие выглядит так :

 //get specific worker
export const getWorker = (id) => {
    return function (dispatch, getState) {
        axios.get(`/worker/${id}`, tokenConfig(getState))
            .then(res => dispatch({ type: WORKER_PROFILE_SUCCESS, payload: res.data.data })
            )
            .catch(error => dispatch(setError(error.response.data, error.response.status)))
    }
}
 

Мой список выглядит так :

 const mapStateToProps = state => {
  return {
    data: state.items
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getServiceProviders: () => dispatch(getServiceProviders())
  }
}

function ServiceProvidersList({ data, getServiceProviders }, props) {
  const { classes } = props;

  let history = useHistory();

  useEffect(() => {
    getServiceProviders();
  }, []);

  const handleClick = (id) => e => {
    console.log("here", id);
    history.push(`/admin/service-provider/${id}`);
  }

  return (
    <div>

      {data.isLoading ? (
        <h2> Loading... </h2>
      ) : (
        <GridContainer>

              {data.items amp;amp; data.items.length > 0 amp;amp; data.items.map(item => {
                return (
                  <Grid container spacing={3}>
                    <Grid item xs={12} sm={10}>
                      <Card className="card" key={item.id} onClick={handleClick(item.id)}>
                        <CardHeader color="primary"> {item.user.first_name} {item.user.last_name} </CardHeader>
                      </Card>
                    </Grid>
                  </Grid>
                )
              })}
        </GridContainer>
      )}
    </div>
  )}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(ServiceProvidersList));