У меня есть компонент без гражданства, и я хочу его повторно обработать. Как я могу это сделать? Я попытался использовать forceUpdate
, но это не сработало.
Могу ли я использовать forUpdate вместо этого или что-то еще?
У меня есть компонент без гражданства, и я хочу его повторно обработать. Как я могу это сделать? Я попытался использовать forceUpdate
, но это не сработало.
Могу ли я использовать forUpdate вместо этого или что-то еще?
Используя перехватчики реагирования, теперь вы можете вызывать useState()
в функции вашего компонента. Это вернет массив из 2 вещей: значение и функцию "setter", которую вы можете использовать для обновления первого возвращенного значения, и, таким образом, вынудит ваш компонент функции выполнить повторный рендеринг, как это делает forceUpdate
:
import React, { useState } from 'react';
//create your forceUpdate hook
function useForceUpdate(){
const [value, setValue] = useState(true); //boolean state
return () => setValue(!value); // toggle the state to force render
}
function MyComponent() {
// use your hook her
const forceUpdate = useForceUpdate();
return (
<div>
{/*Clicking on the button will force to re-render like force update does */}
<button onClick={forceUpdate}>
Click to re-render
</button>
</div>
);
}
Вышеуказанный компонент использует пользовательскую функцию перехвата (useForceUpdate
), которая использует перехват булевого состояния (useState
). Он переключает логическое состояние и, таким образом, указывает React перезапустить функцию рендеринга.
Обновление реагирует v16.8 (16 февраля 2019 года)
Поскольку реагирует на выпуск 16.8 с зацепками, функциональные компоненты теперь могут сохранять постоянство state
. С помощью этой способности вы теперь можете подражать a forceUpdate
:
function App() {
const [, updateState] = React.useState();
const forceUpdate = React.useCallback(() => updateState({}), []);
console.log("render");
return (
<div>
<button onClick={forceUpdate}>Force Render</button>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root"/>
Отказ от ответственности: НЕ ОТВЕТ НА ПРОБЛЕМУ.
Оставляя Важное примечание здесь:
Если вы пытаетесь принудительно обновить компонент без состояния, скорее всего, что-то не так с вашим дизайном.
Рассмотрим следующие случаи: