![](/img/trans.png)
[英]I am doing an react project and I have this error in my project which releted to google maps , please help me to solve this
[英]I am not able to delete items in my todo list made with react, please help me with error in my code
下面是我的待办事项列表代码,我无法在删除项目功能中删除列表中的项目,请帮助我解决错误。
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>
);
}
您正在将 click 事件传递给deleteItem
处理程序。
const deleteItem = (ind) => { // <-- click event object!
return setItems(items.filter((item)=>{return item.ind!==ind}))
}
...
<button onClick={deleteItem}>-</button>
您的过滤器功能也存在问题,您正在将索引与项目上的属性进行比较,并且此条件几乎总是为假并清除items
数组。
(item)=>{return item.ind!==ind}) // item.ind is undefined
修复deleteItem
处理程序以正确比较索引。
const deleteItem = (index) => {
setItems(items => items.filter((item, i)=> i !== index));
}
您需要将映射索引值传递给回调。 不要忘记为映射元素添加唯一的 React 键。 由于您在 item 元素上没有 GUID,因此数组索引现在必须完成。
{items.map((itemval, index) => {
return (
<div key={ind} style={{ display: "flex" }}>
<button onClick={() => deleteItem(index)}>-</button>
<li id={index}>{itemval}</li>
</div>
);
})}
如果您想避免按钮的onClick
处理程序中的匿名函数,您可以将deleteItem
转换为deleteItem
函数并封闭/关闭特定 todo 的索引值。 返回一个函数作为onClick
回调。
const deleteItem = (index) => () => {
setItems(items => items.filter((item, i)=> i !== index));
}
...
<button onClick={deleteItem(index)}>-</button>
试试这个! 这应该工作
项目没有任何 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.