从ReactJS中的状态删除项时出错

我正在尝试从React中的状态中删除项目，但遇到问题。单击“删除”按钮后，浏览器检查器中的API调用将成功并重新加载页面，但该项目从未从状态中删除，因此在用户重新加载页面之前仍显示该项目，而该页面只是再次调用API以列出项目。这是我的App.js：

class App extends Component{
  state = {
    modalOpen: false,
    externalNameInput: "",
    requestorNameInput: "",
    approvalNameInput: "",
    dateLastApprovedInput: "",
    Externals: []
  }

  handleOpen = () => this.setState({ modalOpen: true })

  handleClose = () => this.setState({ modalOpen: false })

  async componentDidMount() {
    const result = await API.graphql(graphqlOperation(listExternals))
    this.setState({ Externals: result.data.listExternals.items });
  }


  handleDeleteService = async externalId => {
    const { Externals } = this.state
    const input = { id: externalId}
    const result = await API.graphql(graphqlOperation(deleteExternal, { input }))
    const deletedExternalId = result.data.deleteExternal.id;
    const updatedServices = Externals.filter(external => external.Id !== deletedExternalId)
    this.setState({ Externals: updatedServices })
  }

  handleAddService = async event => {
    const { external, Externals } = this.state;
    event.preventDefault()
    const input = {
      externalName: this.state.externalNameInput,
      requestorName: this.state.requestorNameInput,
      approvalName: this.state.approvalNameInput,
      dateLastApproved: this.state.dateLastApprovedInput
    }
    const result = await API.graphql(graphqlOperation(createExternal, { input: input}))
    const newService = result.data.createExternal
    const updatedServices = [newService, ...Externals]
    this.setState({ Externals: updatedServices, externalNameInput: "", requestorNameInput: "", approvalNameInput: "", dateLastApprovedInput: "", modalOpen: false})
  }
  render() {
    const { Externals, externalNameInput, requestorNameInput, approvalNameInput, dateLastApprovedInput} = this.state
    return (
      <div>
      {/*List of Services Formatting*/}
      <Container style={style.last}>
        <div>
          {Externals.map(item => (
            <Table color={colors}>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>Actions</Table.HeaderCell>
                  <Table.HeaderCell>Service</Table.HeaderCell>
                  <Table.HeaderCell>Requestor</Table.HeaderCell>
                  <Table.HeaderCell>Approver</Table.HeaderCell>
                  <Table.HeaderCell>Last Approved</Table.HeaderCell>
                </Table.Row>
              </Table.Header>

              <Table.Body>
                <Table.Row>
                  <Table.Cell>
                  <div key={item.id}>
                  <button onClick={() => this.handleDeleteService(item.id)}>
                    <span>&times;</span>
                  </button>
                  </div>
                  </Table.Cell>
                  <Table.Cell>{item.externalName}</Table.Cell>
                  <Table.Cell>{item.requestorName}</Table.Cell>
                  <Table.Cell>{item.approvalName}</Table.Cell>
                  <Table.Cell>{item.dateLastApproved}</Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table>
            ))}
        </div>
        </Container>
        {/*End List of Services Formatting*/}
      </div>
    );
  }
}

export default withAuthenticator(App, { includeGreetings: true });

在多次查看代码之后，我无法确定哪些是错误的。任何帮助都将不胜感激

这条线

---

Externals.filterexternal=>external.Id！==deletedExternalId正在对Id属性进行筛选，请注意，当我猜测您需要Id时，Id中的大写字母I。因此，filter函数返回undefined！==deletedExternalId，对所有项目都是如此，因此不会更新状态。

乐意帮助：

  handleDeleteService = async externalId => {
    const { Externals } = this.state
    const input = { id: externalId}
    const result = await API.graphql(graphqlOperation(deleteExternal, { input }))
    const deletedExternalId = result.data.deleteExternal.id;
    const updatedServices = Externals.filter(external => external.Id !== deletedExternalId)
    this.setState({ Externals: updatedServices })
  }