反應輸入標簽元素無法刪除

Question

我有標簽輸入的表格，我能夠成功添加標簽，

但是當我刪除標簽時，state 沒有更新。

這是工作演示

應用程序.js

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

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

TagsInput.js

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

Answer 1

如下所示更新您的useEffect方法。

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

Answer 2

您在removeTags組件中的TagsInput不會調用props.selectedTags(updatedTags); 修改標簽后。 因此，父級不知道更改，也不會觸發下半部分中這些標簽的重新呈現。 TagsInput 本身會重新渲染，因為您在內部進行了 state 更改。

我會告誡不要像這樣復制 state，因為它是不必要的，並且可能導致難以識別和調試的異步問題。 我唯一推薦它是在需要轉換或過程密集的時候。 在這種情況下，這不會發生，因此您應該選擇使 TagsInput受控或不受控制，而不是兩者兼而有之。