Question

我正在从API中获取用户列表，并且尝试使用“ DELETE”方法删除用户，但该用户将被删除，但是在删除该项目后，它不会重新呈现用户列表，因此我使用map来映射表中所有用户的错误。 “ DELETE”方法可以正常工作，它给出200的响应，但是在收到删除消息后，地图不起作用。

玩弄代码尝试了很多我想到的事情，但是没有运气。

获取用户列表：

export const getUsers = () =>{
  let url ='https://api.net/api/users';
  return dispatch => {
    dispatch(initiateUserRequest(true));
    api({
        url: url,
        method: 'GET'
      })
        .then(response=>{
          dispatch(receiveUsers(response.data.data), false)
        })
        .catch(err=>{
          dispatch(errorUsers("Something went wrong:"+ err.message))
        })
    }
};

删除用户：

export const deleteUser = (username) =>{
  let url = `https://deletingusers/api/users/${username}`;

  return dispatch => {
    dispatch(initiateUserRequest(true));

    api({
      url: url,
      method: 'DELETE',
    })
      .then(response=>{
        dispatch(receiveUsers(response),false)
      })
      .catch(err=>{
        dispatch(errorUsers("Something went wrong:"+ err.message))
      })
  }
};

映射数据的表tabledata.map：

<TableBody>
            {tableData.map((prop, key) => {
              return (
                <TableRow key={key}>
                  <TableCell className={classes.tableCell}>
                    {prop.username}
                  </TableCell>
                  <TableCell className={classes.tableCell}>
                    {prop.name}
                  </TableCell>
                  <TableCell className={classes.tableCell}>
                    {prop.email}
                  </TableCell>
                  <TableCell className={classes.tableCell}>
                    {prop.phoneNumber}
                  </TableCell>
                  <TableCell className={classes.tableCell}>
                    {prop.zip}
                  </TableCell>
                  <TableCell className={classes.tableCell}>
                    {prop.address}
                  </TableCell>
                  <TableCell className={classes.tableCell}>
                    {prop.status}
                  </TableCell>
                  <TableCell className={classes.tableCell}>
                    {prop.mobile}
                  </TableCell>
                  <Tooltip
                    id="tooltip-top"
                    title="Edit Task"
                    placement="top"
                    classes={{ tooltip: classes.tooltip }}
                  >
                    <IconButton
                      aria-label="Edit"
                      className={classes.tableActionButton}
                    >
                      <Edit
                        onClick={() => this.props.onEditUser(prop)}
                        className={
                          classes.tableActionButtonIcon + " " + classes.edit
                        }
                      />

                    </IconButton>
                  </Tooltip>
                  <Tooltip
                    id="tooltip-top-start"
                    title="Delete"
                    placement="top"
                    classes={{ tooltip: classes.tooltip }}
                  >
                    <IconButton
                      aria-label="Close"
                      className={classes.tableActionButton}
                    >
                      <Close
                        className={
                          classes.tableActionButtonIcon + " " + classes.close
                        }
                        onClick={() => this.props.onDeleteUser(prop.username)}
                      />
                    </IconButton>
                  </Tooltip>
                </TableRow>
              );
            })}
          </TableBody>

可以根据需要添加更多代码。

Answer 1

您需要通过将tableData作为参数发送到deleteUser来从deleteUser函数的原始用户数组中过滤出删除的用户名。

export const deleteUser = (username,tableData) =>{ // send tableData overhere

let url = https://deletingusers/api/users/${username};

退货派发=> { dispatch（initiateUserRequest（true））;

api({
  url: url,
  method: 'DELETE',
})
  .then(response=>{
    const updatedTableData = tableData.filter(data => data.username !== username)
    dispatch(receiveUsers(updatedTableData),false)
  })
  .catch(err=>{
    dispatch(errorUsers("Something went wrong:"+ err.message))
  })

} };

Answer 2

缺少用于删除项目的Reducer和Action，我试图直接删除它，这导致未从商店中删除它的错误。因此，我为删除添加了一个动作和缩减器，并正确包含了我的DELETE方法。我正在使用我选择的用户名删除它。因此，我将选定的用户发送到我的reducer，通过它我也从商店和api中删除了该用户。

Reducer：

 case types.DELETE_USER:
      newState = {
        usersData: {},
        isFetching: true,
        error: false
      };
      return{
        ...state, usersDetail: newState.usersData.filter( item => item.username !==action.username)
      };

操作：

const deleteUsers =(username, isFetching) =>{
  return{
    type: types.DELETE_USER,
    username,
    isFetching
  }
};

export const deleteUser = (username) =>{
  let url = `www.api.com ${username}`;

  return dispatch => {
    dispatch(initiateUserRequest(true));

    api({
      url: url,
      method: 'DELETE',
    })
      .then(response=>{
        dispatch(deleteUsers(response),true)
      })
      .catch(err=>{
        dispatch(errorUsers("Something went wrong:"+ err.message))
      })
  }
};

删除项目后如何重新呈现数组列表？它会产生错误，并且不会重新渲染

2 个答案: