如何根据路由参数从众多用户中只导入一个用户？

Question

我的店铺：

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

现在，我只想根据路由参数导入其中一个用户，例如。

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

问题是..如何在mapStateToProps函数从我的商店中获取数据之前建立上面的id变量？我的 mapStateToProps：

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

Returns 未定义。我尝试将变量 'id' 放在 mapStateToProps 中，但我认为参数在它开始获取数据时尚未建立。

编辑：此外，我无法在 mapStateToProps 中建立 id 变量，因为 this.props 在组件外部未定义。我该怎么做？

Answer 1

您可以使用数组方法find获取匹配id的对象。

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

Answer 2

您可以过滤用户对象以获得所需的用户。

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

filter 将 return 一个数组，因此您需要 [0] 来获取匹配的对象。在您的实际代码中，您可能希望处理边缘情况，例如 ID 不存在时。

此外，如果您的目标不是 Internet Explorer，您可以尝试 find。它return是满足提供的测试函数的数组中第一个元素的值。

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

Answer 3

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 在上面的例子中。

如何根据路由参数从众多用户中只导入一个用户？

How to import only ONE user out of many based on the route params?

javascript

store

reactjs

redux

react-redux