Javascript 文本区域中的值不为'；在REACT中不会被删除

**我遇到一个问题，每次尝试删除最上面的复选框时，textarea中的值都不会被删除。相反 textarea中的值被传递到底部组件。为什么 这种情况正在发生，我该如何解决？例如，我在处理的问题上附加了一个imgur。如果仔细观察，每个复选框都有一个唯一的id。例如，当我尝试删除“Hello”时，它不会被删除，而是被传递到底部组件。我已经试着弄明白了，但是运气不好。请帮帮我**

**PriorityLists.jsx**
从“React”导入React，{useState，useffect}；
从“/Actions”导入{Priority}；
功能优先级列表（道具）{
const[isChecked，setChecked]=使用状态（false）；
常量[changeInput，setChangeInput]=useState（null）；
功能检查（e）{
const id_to_be_deleted=e.target.attributes.getNamedItem（“唯一密钥”）.value；
如果（！已检查）{
setChecked（true）；
道具添加（已选中，id将被删除）；
}
否则{
setChecked（假）；
道具添加（已选中，id将被删除）
}
}
报税表（
e、 target.checked=isChecked}onClick={e=>check（e）}checked={props.checked}id=“check item”type=“checkbox”aria label=“以下文本输入的复选框”/>
setChangeInput（e.target.value）}value={changeInput}class=“formcontrol”rows=“1”name={props.name}>
)
}
导出{PriorityLists}；

---

**Tasks.jsx**
从“React”导入React，{useState，useffect}；
从“./组件/操作”导入{删除、刷新、添加}；
从“./components/Header”导入{Header}；
从“./components/PriorityLists”导入{PriorityLists}”；
从“uuid”导入{v4作为uuidv4}；
功能任务（）{
const[toDo，setToDo]=useState（[]）；
const[idsToRefresh，setIdsToRefresh]=useState（[]）；
const[filter_items，setfilterietems]=useState（false）；
const[ids，setIds]=useState（[]）；
useffect（（）=>{
如果（toDo[0]！==未定义）{
setToDo（toDo.filter（项=>{
退货！标识。包括（商品标识）；
}))
}
}，[过滤项]；
添加的函数（已选中，要删除的id）{
如果（！选中）{
setid（（项目）=>[…项目，要删除的id]）；
}
否则{
setid（id.filter（项=>{
返回项目！==要删除的id\u；
}))
}
}
函数addToDos（）{
常量id=uuidv4（）；
setToDo（toDo.concat（{u Id:Id，value:}））；
setIdsToRefresh（idsToRefresh.concat（id））；
}
函数刷新（）{
setToDo（toDo.filter（项=>{
return！idsToRefresh.includes（item.\u Id）；
}))
}
返回(
{
toDo.map（项目=>{
报税表（

{item.value}{item.\u Id}

)
})}
)
}
导出默认任务；

在呈现项目数组时，如果未提供正确的键，则会发生这种情况给他们一个唯一的键。例如：

    toDo.map(item=> {
        return (<div key={item._Id}>

toDo.map（项=>{
返回(

然后，当删除某个内容时，通过该键删除它，而不是基于它在列表中的位置

---

还要查看什么是键以及它们为什么在React中很重要，特别是在可变列表方面

非常感谢！我知道这与键有关，但不知道它发生在哪里。我花了一个星期的时间试图弄清楚这一点。@Ron不用担心，很高兴一切都解决了：）如果此答案解决了您的问题，请将其标记为正确答案（向下箭头下方的勾号）

**Tasks.jsx**
import React, {useState, useEffect} from "react";
import {Delete, Refresh, Add} from "../components/Actions";
import {Header} from "../components/Header";
import {PriorityLists} from "../components/PriorityLists";
import {v4 as uuidv4} from 'uuid';



function Task() {

    const [toDo, setToDo] = useState([]);
    const [idsToRefresh, setIdsToRefresh] = useState([]);
    const [filter_items, setFilterItems] = useState(false);
    const [ids, setIds] = useState([]);

    useEffect(() => {
        if(toDo[0] !== undefined) {
            setToDo(toDo.filter(item=> {
                return !ids.includes(item._Id);
            }))
        }


    }, [filter_items]);

    function addIds(checked, id_to_be_deleted) {
        if(!checked) {
            setIds((item)=> [...item, id_to_be_deleted]);
        }
        else {
            setIds(ids.filter(item=> {
                return item !== id_to_be_deleted;
            }))
        }
    }



    function addToDos() {
        const id = uuidv4();
        setToDo(toDo.concat({_Id: id, value:<PriorityLists id = {id} checked = {false} addIds = {addIds} />}));
        setIdsToRefresh(idsToRefresh.concat(id));
     
      
    }

  
    

    function refresh() {
        setToDo(toDo.filter(item=> {
            return !idsToRefresh.includes(item._Id);
        }))
    }



    return (
    <div className = "main-content">
        <div className = "container-fluid">
            <div className = "row underline">
                <div className= "col">
                    <div className = "row">
                    <div className = "col-3 pt-2">
                        <Refresh _refresh = {refresh} />
                    </div>

                    <div className = "col-6 text-center">
                        <Header header ={"Tasks"}/>
                    </div>

                    <div className = "col-3 pt-2">
                        <button  className = "float-right">
                            <Delete setFilterItems = {setFilterItems} filter = {filter_items} />
                        </button>
                    </div>

                    </div>
                </div>
            </div>

            <div className = "row">
                <div className = "col">
                   {
                   toDo.map(item=> {
                       return (<div> 
                       <ul>
                           <li>{item.value} {item._Id}</li>
                         
                       </ul>
                       </div>)
                   })}
                   
                   
 
                    
                </div>
            </div>


            <div className = "row">
                
                <div className = "col pr-4">
        
                    <Add addToDos = {addToDos} />
                
                </div>
            </div>



        
        </div>
    </div>
    
    )
}

export default Task;

    toDo.map(item=> {
        return (<div key={item._Id}>