Блог

** У меня возникла проблема, когда каждый раз, когда я пытаюсь удалить самый верхний флажок, значение в текстовой области не удаляется. Вместо этого значение в текстовой области передается нижнему компоненту. Почему это происходит и как я могу это решить? Например, я прикрепил imgur к проблеме, с которой я имею дело. Если вы присмотритесь, к каждому флажку прикреплен уникальный идентификатор. Например, когда я пытаюсь удалить «Hello», оно не удаляется, а вместо этого передается нижнему компоненту. Я пытался выяснить это, но безуспешно. Пожалуйста, помогите мне. **

https://imgur.com/a/ToD6uUa

 **PriorityLists.jsx**
import React, {useState, useEffect} from "react";
import { Priority } from "./Actions";




function PriorityLists(props) {
    const [isChecked, setChecked] = useState(false);
    const [changeInput, setChangeInput] = useState(null);
  

    


    function check(e) {
        const id_to_be_deleted = e.target.attributes.getNamedItem("unique_Key").value;
       
        if(!isChecked) {
            setChecked(true);
            props.addIds(isChecked, id_to_be_deleted);

        }

        else {
            setChecked(false);
            props.addIds(isChecked, id_to_be_deleted)
        }
    }
    

    return ( 
    <form key = {props.id}  >
       <div className = "input-group mb-3">
            <div className="input-group-prepend">
                <div className="input-group-text">
                <input unique_Key = {props.id}   onInput = {e=>   e.target.checked = isChecked} onClick={e=> check(e) } checked = {props.checked} id = "check-item" type="checkbox" aria-label="Checkbox for following text input"/>
                </div>
            </div>
            <textarea id = {props.id} onChange = {e=>setChangeInput(e.target.value)} value = {changeInput}  class="form-control"  rows="1" name = {props.name}></textarea>
            <Priority/>
         </div>
   </form>
    )
}

export {PriorityLists};
 

 **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}>
 

Затем при удалении чего-либо удалите его с помощью этого ключа, а не на основе его позиции в списке.

Также посмотрите, что такое ключи и почему они важны в React, особенно в отношении изменяемых списков