У меня есть три компонента для обработки Добавление / удаление хэштегов . Пусть это будут три файла, такие как
- HashTags.ts - умный компонент
- ShowHashTags.ts - немой компонент
- AddHashTags.ts - умный? компонент
Компонент HashTags извлекает данные с сервера и обрабатывает два других события: добавление нового хештега и удаление хештега .
Компонент AddHashTags обрабатывает Добавление действия (отправка на сервер), а затем запускает функцию onUpdate , чтобы сообщить своему главному компоненту обновить данные (с сервера).
Отображение компонента ShowHashTags данные, а также обрабатывает действие onDelete.
Позвольте мне показать вам код HashTags компонента:
const HashTags: React.FC = () => {
const [rows, setRows] = useState([]); // rows - is data to display (rows of table)
const [update, setUpdate] = useState(Symbol()); // check the way I fire Update event
useEffect(() => {
loadHashTag().then(hashtags => {
setRows(hashtags);
});
}, [update]); // fires "onInit" and when I force to change "update"
const deleteTag = (id) => {
deleteHashTag(id).then(() => {
setUpdate(Symbol()); // force update
});
};
return (
<div>
<AddHashTags onUpdate={() => setUpdate(Symbol())} />
<ShowHashTags data={rows} onDelete={deleteTag} />
</div>
);
};
Пожалуйста, обратите внимание, как я заставляю действие обновления. Насколько это хорошо? Мне просто нужно установить новое случайное значение, чтобы «обновить» поле, чтобы использовать перехватчик useEffect.
Итак, мой вопрос: какой механизм лучше всего сделать такую вещь? Мой код работает, но мне просто интересно, насколько он хорош.
PS Вполне нормально, что я получаю данные с сервера дважды. Я мог бы использовать глобальное хранилище или pu sh назад обновленные данные из компонента AddHashTags, но я могу получить данные еще раз (даже чтобы убедиться, что данные добавлены).