[英]I am not able to delete items in my todo list made with react, please help me with error in my code
below is my code for todo list i am not able to delete items in my list in delete items function please help me with error.下面是我的待办事项列表代码,我无法在删除项目功能中删除列表中的项目,请帮助我解决错误。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [inputList, setInputList] = useState("");
const [items, setItems] = useState([]);
const change1 = (e) => {
setInputList(e.target.value);
};
const change2 = () => {
setItems((oldItems) => {
return [...oldItems, inputList];
});
setInputList("");
};
const deleteItem = (ind) => {
return setItems(items.filter((item)=>{return item.ind!==ind}))
}
return (
<div className="App">
<div className="inner_div">
<h1 style={{ borderBottom: "2px solid black" }}>ToDo List</h1>
<input type="text" onChange={change1} value={inputList} />
<button onClick={change2}>+</button>
<ol style={{ listStyle: "none" }}>
{items.map((itemval, ind) => {
return (
<div style={{ display: "flex" }}>
<button onClick={deleteItem}>-</button>
<li id={ind}>{itemval}</li>
</div>
);
})}
</ol>
</div>
</div>
);
}
You are passing the click event to the deleteItem
handler.您正在将 click 事件传递给
deleteItem
处理程序。
const deleteItem = (ind) => { // <-- click event object!
return setItems(items.filter((item)=>{return item.ind!==ind}))
}
...
<button onClick={deleteItem}>-</button>
There is also an issue with your filter function, you are comparing the index to a property on the items and this condition will almost always be false and clear the items
array.您的过滤器功能也存在问题,您正在将索引与项目上的属性进行比较,并且此条件几乎总是为假并清除
items
数组。
(item)=>{return item.ind!==ind}) // item.ind is undefined
Fix the deleteItem
handler to correctly compare indices.修复
deleteItem
处理程序以正确比较索引。
const deleteItem = (index) => {
setItems(items => items.filter((item, i)=> i !== index));
}
You need to pass the mapping index value to the callback.您需要将映射索引值传递给回调。 Don't forget to add an unique React key to the mapped elements.
不要忘记为映射元素添加唯一的 React 键。 Since you've no GUIDs on the item elements the array index will have to do for now.
由于您在 item 元素上没有 GUID,因此数组索引现在必须完成。
{items.map((itemval, index) => {
return (
<div key={ind} style={{ display: "flex" }}>
<button onClick={() => deleteItem(index)}>-</button>
<li id={index}>{itemval}</li>
</div>
);
})}
If you want to avoid the anonymous function in the button's onClick
handler you can convert deleteItem
to a curried function and enclose/close over the specific todo's index value.如果您想避免按钮的
onClick
处理程序中的匿名函数,您可以将deleteItem
转换为deleteItem
函数并封闭/关闭特定 todo 的索引值。 A function is returned to serve as the onClick
callback.返回一个函数作为
onClick
回调。
const deleteItem = (index) => () => {
setItems(items => items.filter((item, i)=> i !== index));
}
...
<button onClick={deleteItem(index)}>-</button>
Try this!试试这个! This should work
这应该工作
Items does not have any ind properties.项目没有任何 ind 属性。 Index is the second parameter of the filter and you must use it in the filter to remove, and you have to pass the index in the function deleteItem (ind).
索引是过滤器的第二个参数,必须在过滤器中使用它才能删除,并且必须在函数deleteItem(ind)中传递索引。
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [inputList, setInputList] = useState("");
const [items, setItems] = useState([]);
const change1 = (e) => {
setInputList(e.target.value);
};
const change2 = () => {
setItems((oldItems) => {
return [...oldItems, inputList];
});
setInputList("");
};
const deleteItem = (ind) => {
return setItems(
items.filter((item, i) => {
return i !== ind;
})
);
};
return (
<div className="App">
<div className="inner_div">
<h1 style={{ borderBottom: "2px solid black" }}>ToDo List</h1>
<input type="text" onChange={change1} value={inputList} />
<button onClick={change2}>+</button>
<ol style={{ listStyle: "none" }}>
{items.map((itemval, ind) => {
return (
<div style={{ display: "flex" }}>
<button onClick={() => deleteItem(ind)}>-</button>
<li id={ind}>{itemval}</li>
</div>
);
})}
</ol>
</div>
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.