我嘗試向我的用戶展示，但它不起作用

Question

我不知道為什么我的用戶在我的 console.log 中未定義我可以在我的 State 中看到它們，但我無法在頁面上列出它們。它出現在我尚未使用 Redux 之前。使用 Z19D8912E233111 之后顯示用戶不再有效。

我將向您展示一段代碼應該顯示在哪里以及 My 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>

我將展示我的減速機 function：

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

按照我對你的問題的評論。

這就是您應該如何使用 state 變量的方式。

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]);

  ...
}

請注意，當您將值分配給這樣的變量時：

分配給該變量的值是分配變量的初始值（未定義），因為減速器尚未更新 state 值。 當它真正更新它時，沒有任何東西更新你創建的第二個變量“ users ”

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

您可以通過以下方式使用它來操作您的 UI：

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

Answer 2

我對這個問題添加了評論，所以也檢查一下。

但是，我剛剛注意到其他應該對您有所幫助的東西。

由於 state 的工作方式，您的用戶可能返回undefined

你在這里有兩個選擇。

1. 將您的users.map()更改為userList.users.map()作為 userList。

2. 如果你真的希望它只是users.map()那么你可能不得不使用一些反應 state。 例如

 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