我尝试向我的用户展示，但它不起作用

Question

我不知道为什么我的用户在我的 console.log 中未定义我可以在我的状态中看到它们，但我无法在页面上列出它们.. 它出现在我还没有使用 Redux 之前。使用 Redux 后，它不再显示用户。

我将向您展示一段代码应该在哪里显示以及如何显示 我的 UserManagement.js：

function UserManagement({ history }) {
 
  const dispatch = useDispatch();
  
  const userLogin = useSelector((state) => state.userLogin);
  const userList = useSelector((state) => state.userList);
  const { loading  } = userLogin;
  const { users} = userList;

 
  useEffect(() => {
    dispatch(getUsers());
  },[dispatch, history]);

  const deleteHandler = (id) => {
    if (window.confirm("Are you sure? you want to delete")) {
      dispatch(deleteUserAction(id));
    }
  };

  
  console.log(userList);
  console.log(users);
  return (
    <MainScreen title={`List of Users`}>
       <Link to="/createUser" id="OpenCreateUserDialogButton">
        <Button style={{ marginLeft: 10, marginBottom: 6 }} size="lg">
          Create new User
        </Button>
      </Link>
      
      {loading && <Loading />}
     
      {users &&
        users?.map((users) => (
         
          <Accordion>
            <Card style={{ margin: 10 }} key={users._id}>
              <Card.Header style={{ display: "flex" }}>
                <span
                  // onClick={() => ModelShow(note)}
                  style={{
                    color: "black",
                    textDecoration: "none",
                    flex: 1,
                    cursor: "pointer",
                    alignSelf: "center",
                    fontSize: 18,
                  }}
                >
                      
                      {users.userID}               
                </span>
                <div>
                  <Link to="/profileedit">
                    <Button
                    id="EditButton"
                    >Edit</Button>
                    </Link>
                    <Button
                      id="DeleteButton"
                      variant="danger"
                      className="mx-2"
                      onClick={() => deleteHandler(users.id)}
                    >
                      Delete
                    </Button>
                  </div>
              </Card.Header>

我将展示我的 Reducer 功能：

export const userListReducer = (state = {}, action) => {
    switch (action.type) {
      case USER_LIST_REQUEST:
        return { loading: true };
      case USER_LIST_SUCCESS:
        return { loading: true, userList: action.payload, success: true };
      case USER_LIST_FAIL:
        return { loading: false, error: action.payload, success: false };
      default:
        return state;
    }
  }

这是我的用户操作：

  export const getUsers = (user) => async (dispatch, getState) => {
    try {
      dispatch({ type: USER_LIST_REQUEST });
  
      const {
         userLogin: { userInfo },
        } = getState();
      
      const config = {
        headers: {
          Authorization: `Bearer ${userInfo.token.token}`,
        },
      };
      const url = "http://localhost:8080/user/"
      const { data } = await axios.get(url, config);
  
      dispatch({ type: USER_LIST_SUCCESS, payload: data });
  
    
    } catch (error) {
      dispatch({
        type: USER_LIST_FAIL,
        payload:
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message,
      });
    }
  };

Answer 1

按照我对您的问题的评论。

这就是你应该如何使用状态变量。

function UserManagement({ history }) {
 
  const dispatch = useDispatch();
  
  const userList = useSelector((state) => state.userList);
 
  useEffect(() => {
    dispatch(getUsers());
  },[dispatch, history]);

  useEffect(() => {
    console.log(userList);
  },[userList]);

  ...
}

如果您仍然需要创建另一个变量，则需要在每次 userList 更改时为其分配一个值 - 就像这样将这一行添加到 useEffect 方法中。

function UserManagement({ history }) {
 
  const dispatch = useDispatch();
  
  const userList = useSelector((state) => state.userList);
  let users = userList;
 
  useEffect(() => {
    dispatch(getUsers());
  },[dispatch, history]);

  useEffect(() => {
    users = userList;
  },[userList]);

  ...
}

注意，当您为这样的变量赋值时：

分配给该变量的值是分配变量的初始值（未定义），因为reducer尚未更新状态值。而当它实际更新它时，不会更新您创建的第二个变量“users”

  const userList = useSelector((state) => state.userList);
  const users = userList;

您可以通过以下方式使用它来操作您的 UI：

{userList &&
    userList.map((users) => (
        <MyComponent/>
    )
}

Answer 2

我对这个问题添加了评论，所以也请检查一下。

不过，我刚刚注意到了一些对你有帮助的东西。

由于状态的工作方式，您的用户可能以undefined返回

这里有两个选择。

1. 将您的users.map() 更改为userList.users.map() 作为用户列表。

2. 如果您真的希望它只是users.map()，那么您可能必须使用一些反应状态。例如

import { useSelector } from 'react-redux';
import { useEffect, useState } from 'react'; 
import { MyUserComponent } from 'some_file';

const YourComponent = () => {
  // grab your userList from redux
  const userList = useSelector(state => state.userList);
  
  // create some state for use the users
  // an empty array to start
  const [users, setUsers] = useState([]);
  
  // watch the userList for changes
  useEffect(() => {
    // update the users state whenever 
    // there is a change to useList
    setUsers(userlist.users)
    
  }, [userList])
  
  
  // do whatever you want in your return
  return (
    <div>
      { 
        users.map(user => <MyUserComponent {...user} key={`user-${index}`}) />
      }
    </div>
  )
}

老实说，我只会做选项 1