Пересоздается компонент, вызываемый Route
Есть <Route path="/edit/:id" component={EditorControl} /> (Пробовал и в свитч оборачивать, и без)
Сам компонент - Tiny Mce
`const fetchJson = async (url : string) => {
console.log("WTF")
const response = await fetch(url);
let json = response.json();
return json;
};
type TParams = {
id?: string;
}
const EditorControl = ({match} : RouteComponentProps<TParams>) => {
const [template, setTemplate] = useState(new TemplateData())
console.log("mid", JSON.stringify(match))
useEffect( () => {
fetchJson('http://myurl/'+match.params.id)
.then(result => {
setTemplate(result as TemplateData)
})
.catch((e) => console.log(e));
});
//let tt = plainToClass(TemplateData, a);
let tempText = template.value
console.log(tempText)
return (
<div className={s.EditorPage}>
<Editor
value={tempText}
init={{
className: s.Editor,
height: 830,
menubar: false,
plugins: [
'advlist autolink lis1ts link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'],
toolbar:
'undo redo | formatselect | bold italic backcolor | \
alignleft aligncenter alignright alignjustify | \
bullist numlist outdent indent | removeformat | help'
}}
/>
</div>
);`
У меня происходит постоянное пересоздание компонента. Почему и как исправить?
Ответы (1 шт):
Автор решения: Dmitrii Sedov
→ Ссылка
Так происходит потому что useEffect вызывается всегда когда происходит rerender компонента (получается аналог componentDidUpdate).
В результате получается так: ajax ->rerender->ajax->rerender.... в useEffect добавляйте проверку загружены ли данные.