Как перезагрузить реагирующий компонент без использования какого-либо обработчика событий? - PullRequest
Новая
       23

Как перезагрузить реагирующий компонент без использования какого-либо обработчика событий?

1 голос
/ 24 января 2020

Можно ли перезагрузить компонент в реакции без помощи такой функции, как onClick. Я хочу, чтобы мой компонент снова перезагрузился после того, как он только что загрузился.

Я попытался использовать window.location.reload(false); в конструкторе. Я даже пытался использовать useEffect(), но они заставляют страницу перезагружаться бесконечно.

Есть ли обходной путь?

Ответы [ 2 ]

0 голосов
/ 24 января 2020

Я видел, как люди достигли sh, установив фиктивный метод setState, который строго используется для запуска refre sh. Рассмотрим этот компонент: 

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 () для проверки). Стоит отметить, что простой вызов метода, который мгновенно изменяет состояние компонента, приведет к бесконечному l oop.

Из прочтения вашего комментария выше, звучит так, как будто вы передаете значение в качестве реквизита в дочерний компонент, и вы хотите, чтобы значение было пересчитано, как только произойдет какое-либо взаимодействие с этим компонентом. В идеале само взаимодействие должно вызывать пересчет. Но если вы просто хотите быстро пересчитать значение и перерисовать компонент сразу после его рендеринга, тогда я думаю, что это сработает: 

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)

0 голосов
/ 24 января 2020

Вы пытались ввести некоторые зависимости в свой хук useEffect? Например: 

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

Здесь ваш компонент будет перерисовываться, только если isLoad меняется.

...