如何在不使用任何事件处理程序的情况下重新加载反应组件？

Question

是否可以在不使用 onClick 等函数的帮助的情况下重新加载 react 中的组件。我希望我的组件在加载后再次重新加载。

我尝试使用 window.location.reload(false); 在构造函数中。我什至尝试过使用useEffect()，但它们使页面无限重新加载。

有什么解决办法吗？

Answer 1

您是否尝试在 useEffect 挂钩中输入一些依赖项？ 喜欢：

 useEffect(() => {
    console.log('hello');
 }, [isLoad];

只有当isLoad 发生变化时，你的组件才会重新渲染。

Answer 2

我看到人们通过设置一个严格用于触发刷新的虚拟 setState 方法来实现这一点。考虑这个组件：

export const Proof = () => {
    console.log("Component re-rendered")
    const [dummyState,rerender] = React.useState(1);

    const onClick = () => {
        rerender(dummyState + 1);
    }

    React.useEffect( () => {
        console.log("dummyState's state has updated to: " + dummyState)
    }, [dummyState])
    return(
        <div>
            <button onClick={onClick}>reRender</button>
        </div>
    )
}

当你想重新渲染组件时，你只需要触发 dummyState 的变化。单击按钮将导致组件状态发生更改，这将导致组件重新呈现（我使用了 console.log() 来证明）。值得注意的是，简单地调用一个立即改变组件状态的方法会导致无限循环。

通过阅读您上面的评论，听起来您正在将一个值作为道具传递给子组件，并且您希望在与该组件发生任何交互时立即重新计算该值。理想情况下，交互本身应该导致重新计算。但是，如果您只想快速重新计算值并在组件渲染后立即重新渲染组件，那么我认为这会起作用：

export const Proof = () => {
    console.log("Component re-rendered")
    const [dummyState,rerender] = React.useState(1);

    //the empty brackets will cause this useEffect 
    //statement to only execute once.
    React.useEffect( () => {
        rerender(dummyState + 1);
    }, []) 

    return(
        <div>
            <p>dummyState</p>
        </div>
    )
}

您还可以重新计算 useEffect 方法中的值，因为它会在组件最初呈现时立即被调用，但不会在任何后续重新呈现时调用（因为空括号作为 useEffect 方法的第二个参数）