Элемент React Input tags не удается удалить

#javascript #reactjs

Вопрос:

У меня есть форма, в которой есть входные теги, я могу успешно добавлять теги,

Но когда я удаляю теги, состояние не обновляется.

App.js

 const selectedTags = (tags) => {
    setTags(tags);
};

<TagsInput selectedTags={selectedTags} tags={tags} />

TagsInput.js

 useEffect(() => {
    setTags(props.tags);
}, [props.tags]);

1. Вы дублируете свое tags состояние в родительском и дочернем элементах. Это не очень хорошая идея, поскольку это может привести к именно такой проблеме, когда они могут быть отключены. Просто управляйте всем состоянием тега в родительском элементе и передавайте его дочерним элементам в качестве реквизита

2. как мне подойти к этому?

Ответ №1:

Ваша removeTags функция внутри TagsInput компонента не вызывается props.selectedTags(updatedTags); после изменения тегов. Поэтому родительский элемент не знает об изменении и не запускает повторную визуализацию этих тегов в нижней части. Сам TagsInput ВЫПОЛНЯЕТ повторную визуализацию, потому что вы внесли внутреннее изменение состояния.

Я бы предостерег от дублирования такого состояния, поскольку оно не является необходимым и может вызвать проблемы с рассинхронизацией, которые сложно идентифицировать и отлаживать. Я рекомендую это только тогда, когда требуется преобразование или требуется много времени. В данном случае этого не происходит, поэтому вы должны сделать TagsInput контролируемым или неконтролируемым, а не обоими.

Ответ №2:

Обновите свой useEffect метод, как показано ниже.

 useEffect(() => {
    props.selectedTags(tags); // This will update the state in parent component as per your parent method implementation
  }, [tags, props]);