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

Question

我正在开发一个React项目。我想在点击重新加载按钮时重新加载一个组件。我按照下面给出的onClick函数进行了实现，但它却重新加载了整个窗口。我只想重新加载那个类组件，而不是整个窗口。有谁能帮我解决这个问题吗？

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

- Gauranga

---

你需要改变状态以便重新渲染某些内容。 - Murat Karagöz

@MuratKaragöz 你能给个例子吗？ - Gauranga

https://reactjs.org/docs/state-and-lifecycle.html - Murat Karagöz

你是否也想调用一些嵌套组件的 componentDidMount 方法？如果是的话，我只看到一个可能的解决方案，那就是更改你想要“更新”的部分中最顶层元素的 key 属性。 - skyboyer

为什么需要重新加载？通常，如果组件需要进行视觉更新，那么属性(props)和/或状态(state)应该已经发生了变化。您能详细说明一下您想要实现什么吗？ - Chris B.

Answer 1

我找到的最简单的方法是设置种子状态，并在呈现的组件的 key 属性中使用该状态。现在每当种子更改时，组件将重新加载。

       const [seed, setSeed] = useState(1);
       const reset = () => {
            setSeed(Math.random());
        }
       <Component key={seed}/>
       <Button onClick={reset}>Reset</Button>

无论何时按下Reload按钮，现在我需要的组件都将重新渲染。

- errorParser

---

谢谢，伙计。虽然有点取巧，但是有效！ - Ezeeroc

嘿 @Ezeeroc 很高兴知道它对你也有效。 - errorParser

Answer 2

如果您只想重新加载组件的数据，请使用useEffect Hook：

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

- Ren

Answer 3

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

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

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

这个可能有点低级，但应该能够起作用。虽然我还没有测试过。

- lukeocodes

---

它将如何重新加载，状态变量将如何被跟踪？ - Gauranga

在render()中发生的任何事情都会重新运行。它对状态更改做出“反应”。 - lukeocodes

它会再次调用componentDidMount吗？ - Gauranga

不应该会这样，如果您需要这样做，可能是因为您错误地使用了生命周期事件。 - lukeocodes

Answer 4

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

参考链接：https://upmostly.com/tutorials/how-to-refresh-a-page-or-component-in-react

- Huỳnh Tấn Lực

---

这仍然会重新加载整个页面，这不是所要求的，而添加“false”只有在Firefox https://developer.mozilla.org/en-US/docs/Web/API/Location/reload上才有任何意义，而不是所需的行为。 - Jorge Kunrath

Answer 5

你可以创建一个新的函数。并且你可以在componentDidMount和refreshPage上调用它。

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

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

refreshPage(){
   this.exampleFunction ();
}

- Alok Mali

---

this.forceUpdate() 不会产生任何结果。 - Gauranga

想要强调的是：这不会调用 componentDidUpdate、componentDidMount 或构造函数中的代码，只会重新渲染。 - skyboyer

这个方法跳过了 shouldComponentUpdate()，你可以在这里阅读更多信息：https://reactjs.org/docs/react-component.html#forceupdate - Alok Mali

@skyboyer 我想要调用componentDidMount。这样forceUpdate()可能就不起作用了。 - Gauranga

@Gauranga，我想你想在点击刷新按钮后再次获取数据。对吗？ - Alok Mali

我修改了我的建议，你可以试试看。 - Alok Mali

Answer 6

window.location.reload(); 会重新加载当前文档，就像浏览器中的刷新按钮一样，并且不会像 AJAX 一样进行任何部分重新渲染。要通过在 React 中使用 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;

- Santhosh

Answer 7

如果您想渲染组件，那么您可以在函数中使用 this.setState({}) 更新任何状态。

- Bhawana

---

它会在重新加载时调用componentDidMount吗？我希望这种情况发生。 - Gauranga

我认为它会调用componentDidMount，因为componentDidMount在render之后调用。 - Bhawana

不会调用 componentDidMount，因为组件已经挂载。它将调用 componentDidUpdate。 - abhishek gupta

Answer 8

最可维护的方式是通过重新激活现有组件来以一致的方式处理“reload”。理想情况下，组件应该通过props/context/redux获取数据，而不是自己加载。这样，您可以通过单个调用刷新所有内容。例如，可以使用某些操作（如“REFRESH_HOTELS”）或具有方法reload的单独上下文。

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

- skyboyer

Answer 9

您可以查看另一个帖子: 不调用setState如何强制React组件重新渲染？

这是最佳答案:

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

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

在函数组件中，没有等价于 forceUpdate 的方法，但是您可以使用useState hook构建一种强制更新的方式。

- Brandon

Answer 10

我遇到了同样的问题，每次我尝试重新加载我的组件时，它都会变成一个无休止的重新加载循环。 以下是我解决问题的方法，希望对你有用：

useEffect(() => {
 // Get the reloaded value from localStorage
 const storedValue = localStorage.getItem("reloadWindow");

// Check if storedValue is null or undefined or 0
 if (
   storedValue === null ||
   storedValue === undefined ||
   storedValue === "0" // this is because I had set to 0 when i logged out
 ) {
      window.location.reload();
      // Set the value in localStorage
      localStorage.setItem("reloadWindow", JSON.stringify(1));
 }
}, []);

- Samuel Muhigirwa