如何根据路线参数仅从一个用户中导入一个用户？

Question

我的商店：

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

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

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

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

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

返回undefined。我尝试将变量'id'放在mapStateToProps中但我认为params在它开始获取数据时没有建立。

编辑：另外，我无法在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将返回一个数组，因此您需要[0]来获取匹配的对象。在您的实际代码中，您可能希望处理边缘情况，例如ID不存在时。

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

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。