状态更新仅一次响应钩子

Question

我正在尝试构建一个应用程序，允许用户使用文本框作为每个数组元素的子级，将标签动态添加到列表中的任何项目。

标签可以是多个标签，并存储为列表：标签：[“ X”，“ Y”，“ X”]

我能够更新状态并首次渲染组件，

例如：

如果我在代码中添加“ X”：组件会立即反映出代码更改

但是在那之后，当我尝试添加更多标签时，它确实会在数组中更改，但不会在Component中呈现。

代码段如下：

父组件中的更新状态：setFilterCopy使用修改后的值更新重复变量

const handleUpdateState = (arrayUpdated) =>{
    setFilterCopy(arrayUpdated)
    console.log(persons)
}

处理子组件中的事件

const handleAddTags = (e) =>{
    if (e.key === 'Enter') {
        let id_of_array_item = e.currentTarget.parentNode.parentNode.querySelector('.add-tag-input').id;
        let tag_val = e.currentTarget.parentNode.parentNode.querySelector('.add-tag-input').value;
       
       let tag_value_pre = persons[id_of_array_item-1]['tags']
       
        if(typeof(tag_value_pre) === 'undefined'){
            Object.assign(persons[id_of_array_item-1], {tags: [tag_val]});
        }
        else{
            persons[id_of_array_item-1]['tags'].push(tag_val)
        }   
        handleChange({persons})
      }
}

用于输入要添加的标签的输入代码

<input type="text" placeholder="Add tags" onKeyDown={e => handleAddTags(e)} id={person.id} className="add-tag-input"></input>

状态函数：

const [word,setWord] = useState("");
const [tags,setTags] = useState([]);    
const [filterCopy,setFilterCopy] =useState([])
const [persons, setStudentProfiles] = useState([]);

任何帮助将不胜感激。谢谢

Answer 1

您是否正在使用“ SetTags”来更新状态？ Arrey的内容应为“标签”，并且每次需要在事件处理程序中设置SetTags来更新状态，然后重新呈现该状态。