Дочерний элемент React не обновляется после изменения родительского состояния
Мне удалось динамически добавлять элементы React в зависимости от высоты контента Добавлять элементы React динамически в зависимости от высоты контента
Я подготовил codeandbox, чтобы показать это:
https://codesandbox.io/s/html-react-parser-forked-8pl3b
Однако проблема, о которой я точно знаю, заключается в том, что дочерний компонент, который показывает фактическую статью, не реагирует на обновленное состояние своего родителя. Это можно проверить, просто нажав на кнопку Article 2.
Связано ли это с использованием ссылки? Я не могу понять, что происходит.
Спасибо за ваш ответ @tholle, но в этом примере вы избавились от моего предыдущего эффекта, в котором реализована функция, которую я хотел.
Да, я не говорю, что вы должны заменить его полностью, я просто указал на то, чего не хватало.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Это потому, что компонент Article имеет собственное состояние. html реквизит, который вы передаете const [article, setArticle] = React.useState(parse(html));, является начальным значением и игнорируется при изменении реквизита.
Вы можете использовать хук useEffect для обновления состояния при изменении реквизита. Вам также потребуется сбросить состояние didInsertAds:
React.useEffect(() => {
setArticle(parse(html));
setDidInsertAds(false);
}, [html]);
Я пробовал это, но это игнорируется, если я сохраняю свой предыдущий эффект. Это работает, если я удалю эффект добавления рекламы.
Это потому, что didInsertAds верно всегда, и вы проверяете это в крючке useEffect. Если сбросить, то работает нормально.
Это потому, что вы не принимаете во внимание, когда меняется реквизит
html. Вы могли бы сделать что-то подобное.