Question

我目前在组件中具有此功能。它要求删除一个api。但是，在功能结束时，我需要更新组件，以便应用重新呈现显示，从而删除呈现已删除对象的jsx元素。我知道不建议使用forceUpdate（），但是无论如何在此代码中它不起作用。有人知道为什么吗？实施此组件更新的更好方法是什么？后端确实删除了请求的对象，并且控制台日志有效。

  handleClick() {
    const logId = this.props.log._id;  
    fetch(`/api/logs/${logId}`, {
      method: 'DELETE',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },  
      body: JSON.stringify({
        id: logId
      })
    })
      .then(res => res.text())
      .then(res => alert(res))
      .catch(err => alert(err))  
    this.forceUpdate()
    console.log('Deleted log"')
  }

Answer 1

this.forceUpdate（）甚至在获取之前就被调用。因为提取是异步操作。尝试在第二个then提取方法中设置状态。

Answer 2

为什么不只使用setState？它将自动重新渲染您的组件。

.then((res) => this.setState({ deletedId: logId }))

然后，您可以通知用户指定的logId已被删除。

{this.state.deletedId && <span>deleted id: {this.state.deletedId}</span>}

在此handleClick之后更新组件的最佳方法？

2 个答案: