Javascript 每当我在react应用程序中添加筛选函数时遇到的问题

我是一个新手，我正在尝试构建一个应用程序，它可以添加用户在文本字段中输入的一些项目，并在单击按钮时显示这些项目。此外，当他想要删除项目时，他只需单击按钮并删除它们。它基本上是一个待办应用程序。我用了一个钩子，用state来改变那些状态。我有3个文件在里面：index.js，只是为了呈现app.jsx，那里什么都没有。App.jsx和ToDoList.jsx

App.jsx

import React, { useState } from 'react';
import ToDoList from './ToDoList';

const App=()=>{
    const [item,setItem]=useState('');
    const [arr,setArr]=useState([]);
    const AddItems=(event)=>{
        setItem(()=>{
            return event.target.value;
        })
    };

    const ItemsOnAdd=()=>{
        setArr(()=>{
            return [...arr,item];
        });
        setItem('');
    };

    const deleteItem=(delete_id)=>{
        console.log('deleted');
       setArr((prevValue)=>{
            prevValue.filter((arrElements,i)=>{
                return delete_id!==i;
            })
       })
    }
    
    return(
        <>
            <div className='outer_div'>
                <div className='inner_div'>
                    <h1>To Do list</h1>
                    <input type='text' placeholder='Add a new item' 
                    name='add_item' onChange={AddItems} value={item} />
                    <button className='add_button' onClick={ItemsOnAdd}>+</button>
                    <ol>
                        {arr.map((arr_items,index)=>{
                            return(
                                <ToDoList 
                                text={arr_items}
                                minusFunction={deleteItem}
                                key={index}
                                id={index}
                            />
                            );
                            
                        })}   
                    </ol>
                </div>
            </div>
        </>
    );
}
export default App;

import React from 'react';

const ToDoList=(props)=>{
        return(
            <>
                
                <li><button className='remove_items' onClick={()=>{
                    props.minusFunction(props.id);
                }}>-</button>{props.text}</li><br />

            </>
        );
}

export default ToDoList;

TypeError:无法读取未定义的属性“map” 并指向arr.map函数正上方App.jsx的第37行

---

请帮助我，谢谢。

您得到的错误意味着您正在对某个非数组的变量使用map

因此，我认为问题在于：

setArr(()=>{
  return [...arr,item];
});

为什么不直接做呢

setArr([...arr,item]);

编辑：

似乎令人不快的是：

setArr((prevValue)=>{
    prevValue.filter((arrElements,i)=>{
        return delete_id!==i;
    })
})

因为您实际上没有返回值，请尝试以下操作：

setArr(prevValue => prevValue.filter((arrElements, i) => delete_id !== i));

---

问题在于删除代码。您不会返回经过筛选的数组。应该是：

   setArr((prevValue)=>{
        return prevValue.filter((arrElements,i)=>{
            return delete_id!==i;
        })
   })

但是，这仍然不能正常工作，因为您将索引用作键，如果列表要更改，则永远无法执行此操作。如果项目具有某种唯一标识符，则使用该标识符，否则必须创建一个

此外，您的ToDoList有一些不正确的代码。您有

props.minus函数（props.id）

，但没有传入名为

id

的道具。您无法通过

props.key

引用索引，因为

key

是一种特殊的道具，无法访问

---

解决方案是使用项目的唯一标识符作为键，并作为更改/删除项目的标识符。

真正的区别是什么？我在里面使用了一个函数，它会返回你要求我更正的内容，我只是一个新手，请解释一下。是的，我认为你是对的，没有区别，只是通读一下：我认为可以肯定的是，在渲染

arr

时，它不是一个数组。所以一定要仔细检查一下。编辑后的答案，希望有助于@shrijalAnd，不起作用，抛出相同的错误，因为这两个东西基本上是一样的。谢谢你提到ToDoList错误，以及关于独特的关键，我遵循了一个教程，他说同样的，你不应该包括索引键，但在这个例子中可以很好地工作，但你应该避免，就像他说的，它在他的例子中工作得很好。

   setArr((prevValue)=>{
        return prevValue.filter((arrElements,i)=>{
            return delete_id!==i;
        })
   })