如何从React列表中删除对象?

Question

我试图在React中制作一个待办事项列表，我可以编辑和删除待办事项。我正试图使用此功能来删除一个待办事项，它在过去的项目中工作。

function deleteTodo(id) {
const updatedTodos = [...values].filter((values) => values.id !== id);
setValues(updatedTodos);}

但是我试图在这个新项目上使用这个代码，我得到错误"值是不可迭代的"。我想这是因为"values"是一个对象，而不是一个数组，如下所示…

const [values, setValues] = useState({
id: Date.now(),
descricao: "",
atividade: "",
trabalho: true,
pessoal: false,
});

像这样删除待办事项的最好方法是什么?这是我的代码:

export function App() {
const [values, setValues] = useState({
id: Date.now(),
descricao: "",
atividade: "",
trabalho: true,
pessoal: false,
});
const [atividades, setAtividades] = useState([]);
function handleChange(event) {
setValues({
...values,
[event.target.name]: event.target.value,
[event.target.descricao]: event.target.descricao,
});
}
function handleSubmit(event) {
event.preventDefault();
setAtividades([
...atividades,
{
id: values.id,
nome: values.atividade,
descricao: values.descricao,
checkTrabalho: values.trabalho,
checkPessoal: values.pessoal,
},
]);
}
function deleteTodo(id) {
const updatedTodos = [...values].filter((values) => values.id !== id);
setValues(updatedTodos);
}
return (
// ==========================================================================================
<div className="App">
<form onSubmit={handleSubmit}>
<input
name="atividade"
type="text"
value={values.atividade}
onChange={handleChange}
/>
<input
maxLength="100"
name="descricao"
type="text"
value={values.descricao}
onChange={handleChange}
/>
<br />
<input
name="trabalho"
id="trabalho"
type="radio"
checked={values.trabalho}
onChange={() => {
setValues({ ...values, pessoal: false, trabalho: true });
}}
/>
<label htmlFor="trabalho">Trabalho</label>
<input
name="pessoal"
id="pessoal"
type="radio"
checked={values.pessoal}
onChange={() => {
setValues({ ...values, trabalho: false, pessoal: true });
}}
/>
<label htmlFor="pessoal">Pessoal</label>
<button type="submit">Criar</button>
</form>
{/* ========================================================================================== */}
{/* ========================================================================================== */}
<div key={values.id}>
<div>
<h1>Trabalhos</h1>
{atividades.map(
(atividade) =>
atividade.checkTrabalho === true && (
<div>
Todo: {atividade.nome} <br />
descricao: {atividade.descricao}
<button onClick={deleteTodo}>deletar</button>
</div>
)
)}
</div>
<div key={values.id}>
<h1>Pessoal</h1>
{atividades.map(
(atividade) =>
atividade.checkPessoal === true && (
<div>
Todo: {atividade.nome} <br />
descricao: {atividade.descricao}
<button onClick={deleteTodo}>deletar</button>
</div>
)
)}
</div>
</div>
</div>
// ==================================================================================================
);
}

Answer 1

它不起作用，因为您创建了一个对象而不是对象数组。如果你想存储多个todo对象，你应该这样创建:

const [values, setValues] = useState([
{
id: Date.now(),
descricao: "",
atividade: "",
trabalho: true,
pessoal: false,
}
]);

然后你可以使用过滤器来删除项目，就像你现在做的一样。或者假设您将todos存储在atividades中，那么您应该更新对象数组而不是值。

const updatedTodos = [...atividades].filter((todo) => todo.id !== id);