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

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

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

我將展示我的 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,
      });
    }
  };

uj5u.com熱心網友回復：

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

這就是你應該如何使用狀態變數。

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

  ...
}

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

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

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

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

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

uj5u.com熱心網友回復：

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

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

由于狀態的作業方式，您的用戶可能會回傳 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

標籤：

上一篇：React-RouteruseParams多次帶來用戶資料

下一篇：如何使用陣列中的映射或組元素跳過陣列中的值？