如何在ReactJS + Redux中检查数组中的每个对象

How to check each object in array in ReactJS + Redux?

本文关键字：数组 对象 检查 ReactJS Redux      更新时间：2023-09-26

我有一个用户对象数组，每个对象都有"用户名"和"密码"。

然后有一个登录页面，一旦用户输入用户名和密码，我想将其传递到化简器中并将它们与"users"数组中的每个对象进行比较，如果找到同时匹配的对象，"密码"和"用户名"，我希望它返回"true"。

以下是减速器： 

const usersReducer = function(users = [], action){
  switch (action.type){
    case 'VERIFY_USER':
        return users.map((user)=> {
          if(user.username === action.username && user.password ===  action.password){
            return true
          } else{
          return false
          }
        })
      }
    default:
      return users
  }
}

但它似乎一直都是真实的。我使用地图是否正确？如果没有，有没有这样的方法可以遍历数组中的每个对象？任何见解或指导将不胜感激。提前谢谢你！

编辑**从以下位置调用它：

  verifyLoginUser(){
    event.preventDefault()
    if(this.props.actions.verifyUser(this.props.loginUser.username, this.props.loginUser.password)){
      console.log('LOGGED IN')
    } else {
      console.log('NOT LOGGED IN')
    }
  }

使用以下减速器：

case 'VERIFY_USER':
  let isVerified = false;
  users.forEach((user)=> {
    if(user.username === action.username && user.password ===  action.password){
      isVerified = true;
      return false;
    }
  });
  return isVerified;

使用 Array.some

return users.some(user => user.username === action.username && user.password === action.password);

Map 函数将返回一个数组。我建议使用不同的本机数组函数："find"。要检查用户数组中是否存在用户对象，您可以执行 

function findUser(user) { 
    return (user.username === action.username && user.password === action.password);
}
var isUser = users.find(findUser) ? true : false;
return isUser;

使用布尔变量和forEach来完成你想要的

case 'VERIFY_USER':
    let isVerified = false;
    users.forEach((user)=> {
        if(user.username === action.username && user.password ===  action.password){
            isVerified = true;
            return false;
        } 
    });
    return isVerified;

为了更进一步，假设您想对此进行迭代并返回正确的用户，以便您可以使用它或其他东西填充当前用户。

case 'VERIFY_USER':
    let currentUser = null;
    users.forEach((user)=> {
        if(user.username === action.username && user.password ===  action.password){
            currentUser = user;
            return false;
        } 
    });
    return currentUser;

编辑：我们在评论中谈论的内容

假设您请求在某处登录用户。 该功能存在于您的道具上

this.props.loginUser({my params here});

现在你的实际行动。

loginUser = (data) => {
    // whatever method you are using to make the request goes here.
    someRequestMethod('/login/, data).then( (response) => {
        if(response.status === 200){
            dispatch(type: USER_LOGIN, payload: response.data); // whatever the user is that comes back from the response. I just put data for an example
        }
    })
}

现在在您的减速机

const populateState = (user) => {
    return {
        id: user.id,
        username: user.username,
        email: user.email,
        isAuthenticated: Object.keys(user).length > 0
    };
}
let defaultState = {id: null, username: '', email: '', isAuthenticated: false};
const loginReducer = (currentUser = defaultState) => {
    switch (action.type){
        case 'USER_LOGIN':
            return Object.assign({}, currentUser, populateState(action.payload));
    return currentUser;
}

最后，在其他任何地方，您都只是寻找当前用户。

if(this.props.currentUser.isAuthenticated){
    // do stuff
}
相关文章：