Question

我有一个带按钮的组件“ A”。当用户按下按钮时，我显示的是模态（reactive-sensitive-modal）模式，其中包含一堆文件和一个更新按钮。当用户按下模态上的更新按钮时，我想用更新的数据重新加载组件“ A”。

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

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

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

Answer 1

尽量不要使用浏览器历史记录作为更新反应的一种方式（尽可能）。 React旨在在组件的属性或状态更改时重新渲染组件。例如，这应该触发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>
    )
  }
}

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

1 个答案: