Как импортировать только ОДНОГО пользователя из многих, основываясь на параметрах маршрута? - PullRequest
Новая
       14

Как импортировать только ОДНОГО пользователя из многих, основываясь на параметрах маршрута?

1 голос
/ 16 апреля 2019

мой магазин: 

store={
  users: [
    {id:1},
    {id:2},
    {id:3}
  ]
}

Теперь я хочу импортировать только одного из пользователей на основе параметров маршрута, например. 

id = this.props.match.params.user_id;

Вопрос в том, как установить переменную id выше, прежде чем функция mapStateToProps выберет данные из моего хранилища? Моя картаStateToProps: 

return {
  singleUser: state.users[id]
};

Возвращает неопределенное. Я попытался поместить переменную 'id' в mapStateToProps, но я думаю, что параметры не установлены к тому времени, когда он начинает извлекать данные.

РЕДАКТИРОВАТЬ: Кроме того, я не могу установить переменную id в mapStateToProps, потому что this.props не определен за пределами компонента .. как я могу это сделать?

Ответы [ 3 ]

1 голос
/ 16 апреля 2019

Вы можете использовать метод массива find, чтобы получить объект с совпадающим id. 

return {
  singleUser: state.users.find(user => user.id === id)
};
0 голосов
/ 16 апреля 2019 
const mapStateToProps = (state, ownProps) => {
  const id = ownProps.match.params.product_id;
    return {
      user: state.users.find(user => user.id === Number(id))
    };
};

this.props компонента можно сделать доступным через второй параметр mapStateToProps(). ownProps в приведенном выше примере.

0 голосов
/ 16 апреля 2019

Вы можете фильтровать объект пользователя, чтобы получить желаемого пользователя.

singleUser: state.users.filter(user => {user.id == id})[0];

filter вернет массив, поэтому вам потребуется [0], чтобы получить соответствующий объект. В вашем реальном коде вы можете обрабатывать крайние случаи, например, когда идентификатор не существует.

Также, если вы не используете Internet Explorer, вы можете попробовать find. Возвращает значение первого элемента в массиве, которое удовлетворяет предоставленной функции тестирования. 

return {
  singleUser: state.users.find((user) => {user.id === id})
};
...