Как получить id категории при клике по категории?

Question

[Юра Комаров]

Всем добро вечера. Пишу учебное приложение на react. https://yurajun.github.io/react-test
Суть вопроса. Как получить id категории при клике по категории (левый столбик)?
Когда я кликаю по телефону и перехожу на эту страницу, я легко могу получить id из match.params.id, но с категорией я, что то ни как не могу совладать. (не могу получить id из объекта match.params)
Этот объект каждый раз выводится в консоле при клике.
Код приложения можно посмотреть в console в разделе sources в левой колонке в папке webpack в под папке " . "
Папка script вход в приложение
Папка app основные блоки.
В приложение минимум кода, что бы было легче разобраться. Понимаю, как сложно разбираться в большом приложение.
Заранее спасибо.

Comments

[Антон Спирин]

Это должно быть шутка? У вас в репозитории только билд лежит без исходников. И не только в этом.

[Юра Комаров]

Нет это не шутка. Специально туда положил только билд.

[Антон Спирин]

Юра Комаров, тогда вопрос стоит снести. Без исходного кода вам вряд ли кто поможет.

Если вы отправите тестовое без исходников потенциальному работодателю, то работу, так же, вряд ли получите.

[Юра Комаров]

Хорошо, я сейчас залью на git. Извините. Как залью, напишу.

[Юра Комаров]

Что бы запустить сборщик, нужно что бы стояла node v = 8 , на 10 пробовал , не работает.
https://github.com/Yurajun/react-test-router
Буду признателен, если поможете с решением. Спасибо.

[Антон Спирин]

Юра Комаров, параметр id должен отдаваться как match.params.id в случае перехода по пути /category/:id и пустой, в случае перехода по корневому пути /

Не ясно зачем вы используете connectedRouter и почему именно hashHistory?
К организации и архитектуре тоже много вопросов.
Запросы к API в функциональных компонентах делать не надо. Такая возможность будет после добавления Hooks API.

Answer 1

[Дмитрий]

Потому что в categories match.params не содержит и не может содержать id категории, так как категорий несколько и их id содержатся в массиве categories, передающимся в компонент

Comments

[Юра Комаров]

Извините, а как же тогда нужно сделать что бы получить id категории?

[Антон Спирин]

Параметр :id передает роутер.

<Switch>
  <Route component={Phones} exact path="/category/:id" />
  <Route component={Phones} exact path="/" />
</Switch>

Другое дело, что компонент показывается по разным маршрутам и параметр может не передаваться.

[Дмитрий]

Юра Комаров, А в каком месте кода вы их получаете? Либо писать в атрибуты соответствующего DOM-элемента, либо сделать для одной категории отдельный компонент и передавать id в его props-ы

[Юра Комаров]

Смотрел видео курсы по построению такого приложения. Там правда "react-router": "3.0.5" и route вложен в роут.

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Route component={Layout}>
        <Route path='/' component={Phones}/>
        <Route path='/categories/:id' component={Phones}/>
      </Route>
      <Route path='/phones/:id' component={Phone}/>
    </Router>
  </Provider>,
  document.getElementById('root')
);

и в компоненте categories при клике по Link легко получили id

const Categories = ({categories, activeCategoryId}) => {
  const renderCategory = (category, index) => {
    const getActiveState = R.propEq('id', activeCategoryId)

    const linkClass = classNames({
      'list-group-item': true,
      'active': getActiveState(category)
    })

    return (
      <Link
        to={`/categories/${category.id}`}
        className={linkClass}
        key={index}
      >
        {category.name}
      </Link>
    )
  }

  const renderAllCategory = () => {
    const linkClass = classNames({
      'list-group-item': true,
      'active': R.isNil(activeCategoryId)
    })

    return (
      <Link
        to='/'
        className={linkClass}
      >
        All
      </Link>
    )
  }

  return (
    <div className='well'>
      <h4>Brand</h4>
      <div className='list-group'>
        {renderAllCategory()}
        {categories.map((category, index) => renderCategory(category, index))}
      </div>
    </div>
  )
}

const mapStateToProps = (state, ownProps) => ({
  categories: getCategories(state),
  activeCategoryId: getActiveCategoryId(ownProps)
})

export default compose(
  withRouter,
  connect(mapStateToProps, null)
)(Categories)

Вод только я пишу по новому синтаксису react-router и по этому у меня так не получается.

[Антон Спирин]

Дмитрий, да, возможно, я не понял вопрос. Где и для чего он хочет получить :id в текущей формулировке не ясно. Но в компонент Categories так же передаются параметры роутера.
Для подсветки активной ссылки вообще достаточно использовать NavLink.

Юра Комаров, никогда не пишите код по старым мануалам.

[Дмитрий]

Антон Спирин, Наверное вы все таки правы, я ступил и удалил комментарий. Прошу прощения. Хотя вопрос открыт, я до сих пор не понимаю, где автор хочет получить id. После клика на ссылку в столбце категорий вызывается phones и matches.params.id содержит id

[Юра Комаров]

Я понимаю что плохо знаю react and js . Я хочу получить id в компоненте categries, по принципу как это сделал автор курса. У него

const mapStateToProps = (state, ownProps) => ({
  categories: getCategories(state),
  activeCategoryId: getActiveCategoryId(ownProps)
})

в ownProps пришел объект и содержащий этот id после того как он нажимал на Link в этом же компоненте.
Попробую воспользоваться NavLink, думаю это то, что мне нужно для подсветки активного пункта категории.

[Дмитрий]

Насколько я понимаю логику здесь

const Phones = props => {
	props.fetchPhones();
	props.fetchCategories();
	const {phones} = props;

	return (
		<div className="container-phones">
			{phones.map((phone, index) => renderPhone(phone, index))}
		</div>
	);
};

Должны быть не все телефоны, а только с отбором по переданной категории, то есть должен быть код

{phones
    .filter(phone => phone.categoryId === props.match.params.id)
    .map((phone, index) => renderPhone(phone, index))
}

и тогда все будет работать корректно

[Дмитрий]

Юра Комаров, В примере автора по клику на категорию вызывается categories, куда и передается выбранный Id,у вас же по клику на категорию вызываются phones, а categories вызываются только из layout в начале, где никакого Id конечно же нет.

[Юра Комаров]

Автор сделал так . Он получил ownProps по клику по Link

const mapStateToProps = (state, ownProps) => {console.log(ownProps); return({
  categories: getCategories(state),
  activeCategoryId: getActiveCategoryId(ownProps)
})}

получал объект

после чего кидал этот объект в функцию

export const getActiveCategoryId = ownProps => R.path(['params', 'id'], ownProps)

и получал id
этот id передается в компонент и на основе него и подсвечивается нажатый Link.
Я так понимаю router v 4 уже так не работает.

Да, хочу получить id активной категории.

[Дмитрий]

Юра Комаров, Еще раз повторюсь
- у автора по клику на категорию выводится компонент categories, куда и передается id
- у вас по клику на категорию выводится phone, а не categories,которые выводятся один раз при активизации приложения

[Юра Комаров]

Мое решение:

import React from 'react';
import {connect} from 'react-redux';
import {compose} from 'redux';
import {NavLink, withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';

const Categories = ({categories}) => {
	console.log(categories);
	return (
		<div className="categories-wrap">
			<div className="">categories</div>
			<ul className="categories-list">
				{categories &&
					categories.map((category, index) => {
						if (index === 1) {
							return (
								<li key={index}>
									<NavLink
										activeClassName="active"
										exact
										to={`/category/${category.id}`}
									>
										{category.name}
									</NavLink>
								</li>
							);
						}
						return (
							<li key={index}>
								<NavLink to={`/category/${category.id}`}>
									{category.name}
								</NavLink>
							</li>
						);
					})}
			</ul>
		</div>
	);
};

const mapStateToProps = state => ({
	categories: state.categories,
});

export default compose(
	withRouter,
	connect(
		mapStateToProps,
		null,
	),
)(Categories);

Categories.propTypes = {
	categories: PropTypes.array,
	props: PropTypes.object,
};

В этом случае NavLink ставит класс active по клику, а если убрать compose то уже не работает.
Дальше в компоненте phones я добавил ownProps в который при клике по Link прилетает id категории

Компонент phones

import React from 'react';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';

import {fetchPhones, fetchCategories} from '../actions';
import {renderPhone} from './renderPhone';

const Phones = props => {
	props.fetchPhones();
	props.fetchCategories();
	const {phones} = props;

	return (
		<div className="container-phones">
			{phones.map((phone, index) => renderPhone(phone, index))}
		</div>
	);
};

const mapStateToProps = (state, ownProps) => {
	console.log(ownProps);
	return {
		phones: state.phones,
	};
};

const mapDispatchToProps = {
	fetchPhones,
	fetchCategories,
};

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

Phones.propTypes = {
	fetchCategories: PropTypes.func,
	fetchPhones: PropTypes.func,
	phones: PropTypes.array,
};

И вот теперь можно будет сортировать телефоны ) . Надеюсь дальше будет проще )