如何在React中重新加载当前组件？

Question

我有一个名为"A"的组件，其中包含一个按钮。当用户按下该按钮时，我将显示一个模态框(react-responsive-modal)，其中包含一堆字段和一个更新按钮。当用户在模态框上按下更新按钮时，我希望重新加载具有更新数据的组件"A"。

我尝试使用this.props.history.push('dashboard/componentA')进行重定向，但它没有起作用。然后我尝试重定向到仪表板，并再次重定向到组件，像这样：

this.props.history.push('/dashboard');
this.props.history.push('/dashboard/componentA');

它起作用了，但我没有看到任何在'componentWillMount'中使用的加载器，组件只是冻结了。我无法向上或向下滚动。

- Naresh

---

更新它的状态，也许？ - Danyal Imran

@Danyallmran 是的，我可以使用更新后的数据更新状态，但是目前我想重新加载整个组件。 - Naresh

Answer 1

尽可能避免使用浏览器历史记录来更新React。React被设计为在组件的props或state更改时重新渲染组件。例如，这应该会触发ComponentA的更新，而无需更新浏览器的历史记录：

class ComponentA extends Component {
  handleModalClick = (event) => {
    this.setState({
      componentData: event.data,
    });
  }

  render() {
    return (
      <ReactModal onClick={this.handleClick} />
    )
  }
}

编辑：更新以展示数据获取父组件：

class DataFetcher extends Component {
  saveAndFetchData = (saveData) => {
    FetchDataPromise(saveData).then((updatedData) => {
      this.setState({ data: updatedData });
    }
  }

  render() {
    const { data } = this.state;

    return (
      <div>
        <ComponentA data={data} />
        <ReactModalComponent handleClick={saveAndFetchData} />
      </div>
    );
  }
}

class ComponentA extends Component {
  render() {
    const { data } = this.props;
    return (
      <div>
        ...render data...
      </div>
    )
  }
}

- JiuJitsuCoder

---

谢谢你的回答！我的模态框实际上是在另一个组件中，将数据从它传递到父组件需要在数据保存到数据库后调度另一个操作。我不确定是否有任何方法可以重新加载整个组件，而不是通过更改组件的当前状态来重新渲染它。 - Naresh

在这种情况下，我通常会有一个数据获取组件来包装 ComponentA 并将数据注入其中。然后你可以在父组件中使用一个 Promise 调用 setState 方法，从而更新 ComponentA 中的数据，导致 ComponentA 进行完全重新渲染。 - JiuJitsuCoder

即使模态框在一个单独的组件中，只要DataFetcher组件是ComponentA和包含模态框的组件的父组件，这个方法就可以工作。 - JiuJitsuCoder

是的，我做过类似的东西。但是提供数据给 componentA 的后端API非常复杂，我认为在更新端点中重复代码并不是一个好方法。也许我可以重新获取数据一次，然后根据成功响应更改状态。对吗？ - Naresh

是的，这就是我会做的。只需让保存端点发送一个简单的响应，当您收到响应后，再获取更新的数据。 - JiuJitsuCoder