Javascript 有没有办法从restapi在ReactJS中创建的动态列表中删除项目？

我现在有一个使用axios从RESTAPI加载结果的列表。我想从结果数组中删除一个带有删除按钮的列表项。然而，我在传递道具等方面遇到了一些困难，我有点困惑结构应该如何工作。这是我当前的代码：

Users.js

class Users extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: null,
      loading: false,
      value: ''
    };
  }

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

    console.log('App:', res);
    this.setState({ users: res, loading: false });
  };

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

  get renderUsers() {
    let users = <h1 />;
    if (this.state.users) {
      users = <UsersDelete list={this.state.users} />;
    }

    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 Users;

类用户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：空，
加载：false，
值：“”
};
}
搜索=异步val=>{
this.setState（{loading:true}）；
让res=等待搜索(
`https://zuul-stage.whatifops.com/v1/user/phone/${val}`
);
console.log（'App:'，res）；
this.setState（{users:res，load:false}）；
};
onChangeHandler=async e=>{
本.搜索（如目标.值）；
this.setState（{value:e.target.value}）；
};
获取渲染器（）{
让用户=；
if（this.state.users）{
用户=；
}
返回用户；
}
render（）{
返回(
使用者

输入电子邮件或电话号码：
this.onChangeHandler（e）}
占位符=“开始键入以搜索”
/>


{this.renderUsers}
);
}
}
导出默认用户；

UsersDelete.js

import User from './User';
class UsersDelete extends Component {
  constructor(props) {
    super(props);
    this.state = {
      users: this.props.list
    };
  }

  render(cards) {
    const { list } = this.props;
    if (list) {
      cards = list.map((m, index) => <User key={index} item={m} />);
    }
    return <div>{cards}</div>;
  }
}

export default UsersDelete;

从“/User”导入用户；
类UsersDelete扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：this.props.list
};
}
渲染（卡片）{
const{list}=this.props；
如果（列表）{
cards=list.map（（m，index）=>）；
}
返回{卡片}；
}
}
导出默认用户删除；

User.js

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      users: ''
    };

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

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

  updateUsers= async event => {
    const { email, phone } = this.props.item;
    this.setState({
      open: !this.state.open
    });
    event.preventDefault();
    // Promise is resolved and value is inside of the response const.
    const response = await axios.put(
      `https://zuul-stage.whatifops.com/v1/user/deidentify/email/${email}`
    );

    console.log(response);
    console.log(response.data);
  };

  render() {
    const { id, email, phone } = this.props.item;
    console.log(this.props.item);
    console.log(email, phone);

    return (
      <div>
        <form>
          <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>
                  <strong>Email:</strong> {email} &nbsp; &nbsp;
                  <strong>Phone:</strong> {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>{' '}
                    {email}
                  </span>
                  <br />
                  <span>
                    &nbsp;&nbsp;&nbsp;&nbsp;{' '}
                    <strong>
                      <i className='fa fa-phone'></i> &nbsp;Phone:
                    </strong>{' '}
                    {phone}
                  </span>
                </Col>
              </Row>
              <br />
            </ModalBody>
            <ModalFooter>
              <Button color='danger' type='submit' onClick={this.open}>
                Delete
              </Button>
              <Button color='secondary' onClick={this.open}>
                Cancel
              </Button>
            </ModalFooter>
          </Modal>
        </form>
      </div>
    );
  }
}

export default User;

类用户扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开：错，
用户：“”
};
this.toggle=this.toggle.bind（this）；
this.updateUsers=this.updateUsers.bind（this）；
}
切换（）{
这是我的国家({
打开：！this.state.open
});
}
updateUsers=异步事件=>{
const{email，phone}=this.props.item；
这是我的国家({
打开：！this.state.open
});
event.preventDefault（）；
//承诺已解析，值在响应常量中。
const response=等待axios.put(
`https://zuul-stage.whatifops.com/v1/user/deidentify/email/${email}`
);
控制台日志（响应）；
console.log（response.data）；
};
render（）{
const{id，email，phone}=this.props.item；
console.log（this.props.item）；
控制台日志（电子邮件、电话）；
返回(
删除
电子邮件：{Email}
电话：{Phone}


删除用户
是否确实要删除具有以下内容的用户
资格证书：




{' '}

电邮：
{'}
{email}


{' '}

电话：
{'}
{电话}


删除
取消
);
}
}
导出默认用户；

这就是它目前的样子。我只是在模式中按delete键后尝试删除列表项。

---

任何和所有的帮助都将不胜感激，因为我非常困惑

您应该研究使用或响应上下文API来更好地管理共享资源。从现在起，您正在执行道具钻取以传递您的用户列表。但随着应用程序的增长，您需要在DOM中传递多个级别的道具。您应该研究使用或响应上下文API来更好地管理共享资源。从现在起，您正在执行道具钻取以传递您的用户列表。但是，随着应用程序的增长，需要在DOM中传递多个级别的道具。