javascript 从REST API提取列表数据后，希望从项数组中删除列表项

ocebsuys  于 2022-11-27  发布在  Java
关注(0)|答案(2)|浏览(116)

我尝试从一组列表项中删除一个列表项，这组列表项是我从REST API动态获得的。我可以通过axios请求从BACKEND中删除列表项，但我必须刷新页面，以便不再显示实际的列表项。我尝试从UI中删除列表项，以便在按下delete时，它会在后端和前端同时删除。似乎无法解决这个问题，我已经尝试了很多不同的方法。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      loading: false,
      value: '',
      open: false
    };

    this.toggle = this.toggle.bind(this);
  }

  search = async val => {
    this.setState({ loading: true });
    let res = await search(
      `https://zuul-stage.whatifops.com/v1/user/phone/${val}`
    );
    this.setState({ users: res, loading: false });
  };

  onChangeHandler = async e => {
    this.search(e.target.value);
    this.setState({ value: e.target.value });
  };

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  get renderUsers() {
    let users = <h1 />;
    if (!this.state.loading) {
      users = this.state.users.map(user => (
        <div>
          <Row>
            <Col lg={2} style={{ maxWidth: '9.7%' }}>
              <Button
                color='danger'
                style={{ paddingTop: 12, paddingBottom: 12 }}
                onClick={this.toggle}
              >
                <i className='fa fa-trash'></i>&nbsp; Delete
              </Button>
            </Col>
            <Col lg={10}>
              <ListGroup>
                <ListGroupItem key={user.id} value={user.value} id={user.id}>
                  <strong>Email:</strong> {user.email} &nbsp; &nbsp;
                  <strong>Phone:</strong> {user.phone}
                </ListGroupItem>
              </ListGroup>
            </Col>
          </Row>
          <br />
          <Modal
            isOpen={this.state.open}
            toggle={this.toggle}
            className={'modal-danger'}
          >
            <ModalHeader toggle={this.toggleSuccess}>Delete User</ModalHeader>
            <ModalBody>
              <Row>
                <Col
                  lg={2}
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    color: '#f86c6b'
                  }}
                >
                  <i className='fa fa-warning fa-3x'></i>
                </Col>
                <Col lg={10}>
                  Are you sure you want to delete the user with the following
                  credentials:
                  <br />
                  <br />
                  <span>
                    &nbsp;&nbsp;&nbsp;{' '}
                    <strong>
                      <i className='fa fa-envelope'></i> &nbsp;Email:
                    </strong>{' '}
                    {user.email}
                  </span>
                  <br />
                  <span>
                    &nbsp;&nbsp;&nbsp;&nbsp;{' '}
                    <strong>
                      <i className='fa fa-phone'></i> &nbsp;Phone:
                    </strong>{' '}
                    {user.phone}
                  </span>
                </Col>
              </Row>
              <br />
            </ModalBody>
            <ModalFooter>
              <Button color='danger' onClick={this.open}>
                Delete
              </Button>
              <Button color='secondary' onClick={this.open}>
                Cancel
              </Button>
            </ModalFooter>
          </Modal>
        </div>
      ));
    } else {
      return <p>Loading...</p>;
    }

    return users;
  }

  render() {
    return (
      <div>
        <div className='display-4'>Users</div>
        <hr />
        <Row>
          <Col lg={12}>
            <Label>Enter an email or phone number:</Label>
          </Col>
        </Row>
        <Row>
          <Col lg={12}>
            <Input
              value={this.state.value}
              onChange={e => this.onChangeHandler(e)}
              placeholder='Begin typing to search'
            />
          </Col>
        </Row>
        <br />
        {this.renderUsers}
      </div>
    );
  }
}

export default App;

任何和所有都将不胜感激。谢谢！

**更新代码：

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [],
      loading: false,
      value: '',
      open: false
    };

    this.toggle = this.toggle.bind(this);
  }

  search = async val => {
    this.setState({ loading: true });
    let res = await search(
      `https://zuul-stage.whatifops.com/v1/user/phone/${val}`
    );
    this.setState({ users: res, loading: false });
  };

  onChangeHandler = async e => {
    this.search(e.target.value);
    this.setState({ value: e.target.value });
  };

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  onDelete(e) {
    let id = e.target.id;
    let updatedUsers = this.users.filter(user => user.id != id);
    this.setState({ users: updatedUsers });
  }

  get renderUsers() {
    let users = <h1 />;
    if (!this.state.loading) {
      users = this.state.users.map(user => (
        <div>
          <Row>
            <Col lg={2} style={{ maxWidth: '9.7%' }}>
              <Button
                color='danger'
                style={{ paddingTop: 12, paddingBottom: 12 }}
                onClick={this.onDelete(user.id)}
              >
                <i className='fa fa-trash'></i>&nbsp; Delete
              </Button>
            </Col>
            <Col lg={10}>
              <ListGroup>
                <ListGroupItem key={user.id} value={user.value} id={user.id}>
                  <strong>Email:</strong> {user.email} &nbsp; &nbsp;
                  <strong>Phone:</strong> {user.phone}
                </ListGroupItem>
              </ListGroup>
            </Col>
          </Row>
          <br />
          <Modal
            isOpen={this.state.open}
            toggle={this.toggle}
            className={'modal-danger'}
          >
            <ModalHeader toggle={this.toggleSuccess}>Delete User</ModalHeader>
            <ModalBody>
              <Row>
                <Col
                  lg={2}
                  style={{
                    display: 'flex',
                    justifyContent: 'center',
                    alignItems: 'center',
                    color: '#f86c6b'
                  }}
                >
                  <i className='fa fa-warning fa-3x'></i>
                </Col>
                <Col lg={10}>
                  Are you sure you want to delete the user with the following
                  credentials:
                  <br />
                  <br />
                  <span>
                    &nbsp;&nbsp;&nbsp;{' '}
                    <strong>
                      <i className='fa fa-envelope'></i> &nbsp;Email:
                    </strong>{' '}
                    {user.email}
                  </span>
                  <br />
                  <span>
                    &nbsp;&nbsp;&nbsp;&nbsp;{' '}
                    <strong>
                      <i className='fa fa-phone'></i> &nbsp;Phone:
                    </strong>{' '}
                    {user.phone}
                  </span>
                </Col>
              </Row>
              <br />
            </ModalBody>
            <ModalFooter>
              <Button color='danger' onClick={this.open}>
                Delete
              </Button>
              <Button color='secondary' onClick={this.open}>
                Cancel
              </Button>
            </ModalFooter>
          </Modal>
        </div>
      ));
    } else {
      return <p>Loading...</p>;
    }

    return users;
  }

  render() {
    return (
      <div>
        <div className='display-4'>Users</div>
        <hr />
        <Row>
          <Col lg={12}>
            <Label>Enter an email or phone number:</Label>
          </Col>
        </Row>
        <Row>
          <Col lg={12}>
            <Input
              value={this.state.value}
              onChange={e => this.onChangeHandler(e)}
              placeholder='Begin typing to search'
            />
          </Col>
        </Row>
        <br />
        {this.renderUsers}
      </div>
    );
  }
}

export default App;
JavaScript

2条答案

按热度按时间
9cbw7uwe

9cbw7uwe1#

我猜你想从这个.state.users中删除用户，你可以这样做

onDelete(id){
let updatedUsers = this.users.filter(user=>user.id!=id)
this.setState({users:updatedUsers })
}

您需要为每个用户添加一个id。
我的建议是，一旦你进行了一个API调用，如果它成功了，就从前端删除它，这样你就可以在API成功回调中添加这个代码。

onClick={() => this.onDelete(user.id)}

这是附加onDelete方式

赞(0）分享  回复(0）举报  2022-11-27
2izufjch

2izufjch2#

js因为我有同样的问题，这工程只显示相关的服务，我们目前正在查看的服务。

const useData = () => {
    let getIndex;
    return (getIndex = data.filter((card) => {
      return card.node.slug !== router.query.slug;
    }));
  };

  useEffect(() => {
    setCardData(useData);
  }, [router.query.slug]);
赞(0）分享  回复(0）举报  2022-11-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com