Javascript React JS-本地存储、.map（）和textarea值存在问题

我正在开发一个带有reactjs的web应用程序来制作超市列表。 每个产品都来自firestore（谷歌工具）中的项目数据库，它们都通过带有特定图像和名称的.map（）显示

其想法是，用户可以为每个产品添加一个描述或数据，以便在将来购买时记住，该描述由用户从一个模态组件中输入，该组件具有一个用户可以编写有关该产品的任何描述的对话框。模态组件位于productItemCard组件内部

在某种程度上，localStorage工作正常，因为更新浏览器时不会删除此描述，但问题是用户为产品输入的描述会添加到所有其他产品中。名单上的人和不在名单上的人。其思想是，每个产品都有自己的描述，用户可以检查他对每个产品的描述，如果他不添加描述，空文本区域将只显示其各自的占位符。

//带TEXTAREA组件的模态
从“React”导入React，{useContext，useState，useEffect}；
导入“/styles.scss”
从“reactjs Popup”导入弹出窗口；
从“react toastify”导入{toast，Slide}；
从“../../utils/listContext”导入{listContext}；
常量ModalComponent=（{item}）=>{
//添加项目和上下文
const{addItem，note，noteChange}=useContext（listContext）；
const onAdd=（）=>{
附加项（项目）
}
//TOAST通知项目添加
const notify=（）=>toast（`Se agregó${item.name}a su lista.`{
位置：“底部中心”，
自动关闭：1500，
hideProgressBar：没错，
closeOnClick:false，
pauseOnHover:是的，
真的，
进展：未定义，
过渡：幻灯片
});
返回(
{关闭=>(
{item.name}
//文本区
{window.location.href==”http://localhost:3000/productos“//修改后的旅馆
？阿格雷加·米利斯塔
当前位置a我的列表a
}
)}
);
}
导出默认ModalComponent；

//

//映射产品组件
从“React”导入React，{useContext}；
从“../ProductCardComponent/ProductCard”导入{ProductCard}；
从“../../utils/listContext”导入{listContext}”；
export const ProductList=（{items}）=>{
const{searchTerm}=useContext（listContext）
返回(
{items.filter（item=>{//SEARCH
如果（searchTerm==“”）{
退货项目
}else if（item.name.toLowerCase（）.includes（searchTerm.toLowerCase（）））{
退货项目
}
}).map（项=>）
))}
)
};

//

//

PRODCUT卡组件
从“React”导入React，{useContext}；
导入“/styles.scss”
从“react icons/ri”导入{RiAddFill}；
从“../../utils/listContext”导入{listContext}”；
从“react toastify”导入{toast，Slide}；
导入“react-toastify/dist/react-toastify.css”；
从“react Animated css”导入{Animated}；
从“/DescriptionModal”导入ModalComponent；
导出常量产品卡=（{item}）=>{
常量{addItem}=useContext（listContext）
const notify=（）=>toast（`Se agregó${item.name}a su lista.`{
位置：“底部中心”，
自动关闭：1500，
hideProgressBar：没错，
closeOnClick:false，
pauseOnHover:是的，
真的，
进展：未定义，
过渡：幻灯片
});
const onAdd=（）=>{
附加项（项目）
}
返回(
{item.name}
)  
};

//用户列表组件中的项目

import React, {useContext} from 'react';
import './styles.scss';
import {listContext} from "../../utils/ListContext";
import {IoCloseOutline} from "react-icons/io5";
import ModalComponent from "../ProductCardComponent/DescripcionModal"

const ItemsInList = () => {

    const { list, removeItem, note } = useContext(listContext);

    return (
        <>
        <div style={{display:'flex', flexDirection:'column', margin:'20px 0'}}> 

                {list.map(({item}) => {

                    return (
                        <>
                            <section className='listProducts_container'>

                                <div className='list_product' id='listProduct'>

                                    <div className='item_detail'>
                                        <img src={item.img} />
                                        <div className='descipt_container'> 
                                            <h2>{item.name}</h2> 
                                            <p style={{color:'grey', fontSize:'14px'}}>
                                                {note}
                                            </p>
                                        </div>
                                    </div>


                                    <div style={{display:'flex'}}>
                                        
                                        <ModalComponent item={item}/>
                                    
                                        <button onClick={()=>{removeItem(item)}}>
                                            <IoCloseOutline style={{marginLeft:'10px'}}/>
                                        </button>
                                    </div>
                                    

                                </div>

                            </section>
                        </>
                    )
                })}
        </div>
    </>
    )
}

export default ItemsInList;

import React，{useContext}来自“React”；
导入“./styles.scss”；
从“../../utils/listContext”导入{listContext}”；
从“反应图标/io5”导入{IoCloseOutline}；
从“./ProductCardComponent/DescriptionModal”导入ModalComponent
const ItemsInList=（）=>{
const{list，removietem，note}=useContext（listContext）；
返回(
{list.map（{item}）=>{
返回(
{item.name}

{注}

{removietem（项目）}}>
)
})}
)
}
导出默认项
// MAP PRODUCTS COMPONENT

import React, {useContext} from 'react';
import {ProductCard} from '../ProductCardComponent/ProductCard';
import {listContext} from "../../utils/ListContext";

export const ProductList = ({ items }) => {

    const {searchTerm} = useContext(listContext)
    
    return (
        <>
            { items.filter( item => { // SEARCH 
                if (searchTerm == "") {
                    return item
                } else if (item.name.toLowerCase().includes(searchTerm.toLowerCase())) {
                    return item
                }
            }).map( item => ( 
                
                <ProductCard 
                    key={item.id} 
                    item={item} 
                />

            ))}
        </>
    )
};

PRODCUT CARD COMPONENT
    import React, {useContext} from 'react';
    import "./styles.scss"
    import {RiAddFill} from "react-icons/ri";
    import {listContext} from "../../utils/ListContext";
    import { toast, Slide } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';
    import {Animated} from "react-animated-css";
    import ModalComponent from './DescripcionModal';

export const ProductCard = ({ item }) => {

    const {addItem} = useContext(listContext)

    const notify = () => toast( `Se agregó ${item.name} a su lista.`, {
        position: "bottom-center",
        autoClose: 1500,
        hideProgressBar: true,
        closeOnClick: false,
        pauseOnHover: true,
        draggable: true,
        progress: undefined,
        transition: Slide
        });

    const onAdd = () => {
        addItem(item)
    }

    return (

        <>
            <Animated animationIn="zoomIn" animationOut="fadeOut" isVisible={true} animationInDuration={500} animationInDuration={500} >
                <div className='card_product' >

                    <div className='btns_container'>

                        <ModalComponent item={item} />
                        
                        <button onClick={onAdd}>
                            <RiAddFill onClick={notify}/>
                        </button>

                    </div>

                    <img src={item.img} onerror="this.src='https://ctkbiotech.com/wp/wp-content/uploads/2018/03/not-available.jpg'"/>

                    <h1>{item.name}</h1>

                </div>
            </Animated>
        </>
    )  
};

import React, {useContext} from 'react';
import './styles.scss';
import {listContext} from "../../utils/ListContext";
import {IoCloseOutline} from "react-icons/io5";
import ModalComponent from "../ProductCardComponent/DescripcionModal"

const ItemsInList = () => {

    const { list, removeItem, note } = useContext(listContext);

    return (
        <>
        <div style={{display:'flex', flexDirection:'column', margin:'20px 0'}}> 

                {list.map(({item}) => {

                    return (
                        <>
                            <section className='listProducts_container'>

                                <div className='list_product' id='listProduct'>

                                    <div className='item_detail'>
                                        <img src={item.img} />
                                        <div className='descipt_container'> 
                                            <h2>{item.name}</h2> 
                                            <p style={{color:'grey', fontSize:'14px'}}>
                                                {note}
                                            </p>
                                        </div>
                                    </div>


                                    <div style={{display:'flex'}}>
                                        
                                        <ModalComponent item={item}/>
                                    
                                        <button onClick={()=>{removeItem(item)}}>
                                            <IoCloseOutline style={{marginLeft:'10px'}}/>
                                        </button>
                                    </div>
                                    

                                </div>

                            </section>
                        </>
                    )
                })}
        </div>
    </>
    )
}

export default ItemsInList;

<p style={{color:'grey', fontSize:'14px'}}>
  {note}
</p>

<p style={{color:'grey', fontSize:'14px'}}>
  {item.note}
</p>