Question

我试图从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 });

我相信它在handleDeleteService函数中有作用（很明显）：

  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 })
  }

多次检查代码后，我无法确定错误之处。任何帮助，将不胜感激。

Answer 1

此行当我猜测您想要Externals.filter(external => external.Id !== deletedExternalId)时，Id正在过滤id属性（注意ID中的大写字母I）。因此，筛选器函数返回undefined !== deletedExternalId，这对所有项目都是正确的，因此不会更新状态。

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

1 个答案: