Question

我正在从事React项目。单击重新加载按钮时，我试图重新加载组件。我实现了如下所示的onClick函数。但是它正在重新加载整个窗口。我只想仅重新加载该类组件，而不是整个窗口。谁能帮我解决这个问题？

refreshPage() {
    window.location.reload();
  }

Answer 1

使用React Hook：

useEffect(()=> {
    fetchData();
}, [data]);
// page will reload whenever data is updated.

Answer 2

您可以通过更新状态来触发组件的重新加载。

class YourComponent extends Component {
  state = {
    reload: false
  };

  refreshPage = () => {
    this.setState(
      {reload: true},
      () => this.setState({reload: false})
    )
  }
}

这很脏，但可能会起作用。我还没有测试过。

Answer 3

您可以创建一个新功能。您可以在componentDidMount和refreshPage上调用它。

exampleFunction = () => {
   /** Do your job here */
}

componentDidMount(){
   /** your code */
   this.exampleFunction ();
   /** your code */
}

refreshPage(){
   this.exampleFunction ();
}

Answer 4

如果要渲染组件，则可以在函数中使用this.setState（{}）更新任何状态。

Answer 5

window.location.reload（）;将重新加载当前文档，就像浏览器中的“刷新”按钮一样，并且不会像AJAX那样进行任何部分重新渲染。通过在setState中进行反应来实现此目的。

在工作示例下面：

import React from "react";

class RefreshComponent extends React.Component {
 constructor(props) {
   super(props);
   this.state = { name: "React Component reload sample" };
}
 submit() {
   this.setState({ name: "React Component Updated - " + new Date() });
}
render() {
  return (
    <div>
      {this.state.name}
      <br />
      <button
       onClick={() => {
         this.submit();
       }}
     >
       Submit
     </button>
    </div>
  );
 }
}

export default RefreshComponent;

Answer 6

最可维护的方法是使反应堆现有组件以一致的方式处理“重新加载”。理想情况下，组件应该通过props / context / redux获取数据，而不是自己加载数据。这样，您可以一次调用刷新所有内容。说它可能是通过执行“ REFRESH_HOTELS”之类的操作或使用方法reload单独的上下文来实现的。

作为最后的选择，您可以将key prop（更新为任何其他值，可能只是随机字符串），然后将重新创建整个分支，包括对componentDidMount的调用。它被称为“通过键道具重置状态”技术。但这既不是性能安全的方法，也不是真正灵活的方法。最好避免这种情况，直到您真的不在乎可维护性（或用作临时解决方案...但是只要应用程序存在，通常“临时解决方案”就会存在）

Answer 7

您可以查看其他主题：Can you force a React component to rerender without calling setState?

这是最佳答案：

<块引用>

在类组件中，你可以调用 this.forceUpdate() 来强制一个重新渲染。

文档： https://facebook.github.io/react/docs/component-api.html

在函数组件中，没有 forceUpdate 的等价物，但是 you can contrive a way to force updates with the useState hook.

如何在reactjs中重新加载组件（页面的一部分）？

7 个答案: