反应。编辑任务功能无限循环?
Reactjs. Edit task features infinity loop?
我尝试构建一个简单的虚拟待办事项应用程序,我的问题发生在我设置了用于编辑特定待办事项项的功能之后。
根据我从浏览器得到的警告,我似乎 运行 进入了无限循环?
我现在试着找出它发生的地方,但遗憾的是我到目前为止找不到它。
有没有人可以给我更多关于这个的见解?提前致谢:
import React, { useState, useEffect } from "react";
import { Form, TasksContainer, TaskWrapper } from "../styledApp";
// ========= STARTING POINT =========
const SearchInput = () => {
// ========= STATES & EFFECTS =========
const [taskValue, setTaskValue] = useState("");
const [allTasks, setAllTasks] = useState(() => {
const persistedTasks = localStorage.getItem("tasks");
if (persistedTasks) {
return JSON.parse(persistedTasks);
} else {
return [];
}
});
const [currentTask, setCurrentTask] = useState({});
const [isEditing, setIsEditing] = useState(false);
useEffect(() => {
localStorage.setItem("tasks", JSON.stringify(allTasks));
}, [allTasks]);
// ========= FUNCTIONS =========
// ========= add related =========
const handleChange = (e) => {
setTaskValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
if (taskValue !== "") {
setAllTasks([
...allTasks,
{ id: allTasks.length + 1, text: taskValue.trim() },
]);
}
setTaskValue("");
};
// ========= delete related =========
// ***** not created yet *****
// ========= edit related =========
const handleEditClick = (todo) => {
setIsEditing(true);
setCurrentTask({ ...todo });
};
const handleChangeEditInput = (e) => {
setCurrentTask({ ...currentTask, text: e.target.value });
};
const handleUpdateTodo = (id, updatedTodo) => {
const updatedItem = allTasks.map((todo) => {
return todo.id === id ? updatedTodo : todo;
});
setIsEditing(false);
setAllTasks(updatedItem);
};
const handleEditFormSubmit = (e) => {
e.preventDefault();
handleUpdateTodo(currentTask.id, currentTask);
};
// ========= JSX RENDERING =========
return (
<>
{isEditing ? (
<Form>
<input
name="editTodo"
type="text"
placeholder="Edit the task..."
value={currentTask.text}
onChange={handleChangeEditInput}
/>
<button type="submit" onClick={handleEditFormSubmit}>
Update the Task
</button>
<button onClick={() => setIsEditing(false)}>Cancel</button>
</Form>
) : (
<Form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Add a task..."
value={taskValue}
onChange={handleChange}
/>
<button type="submit">Submit the Task</button>
</Form>
)}
<TasksContainer>
{!allTasks.length && <p>No tasks</p>}
{!!allTasks.length && (
<ul>
{allTasks.map((task) => (
<div key={task.id}>
<TaskWrapper>
<li>{task.text} </li>
<div>
<button
id={task.id}
value={task.text}
onClick={handleEditClick(task)}
>
Edit
</button>
<button>Delete</button>
</div>
</TaskWrapper>
</div>
))}
</ul>
)}
</TasksContainer>
</>
);
};
export default SearchInput;
那是因为编辑按钮
<button
id={task.id}
value={task.text}
onClick={handleEditClick(task)} >
Edit
</button>
onClick应该是函数引用,如
onClick={(_) => handleEditClick(task)}
我尝试构建一个简单的虚拟待办事项应用程序,我的问题发生在我设置了用于编辑特定待办事项项的功能之后。 根据我从浏览器得到的警告,我似乎 运行 进入了无限循环? 我现在试着找出它发生的地方,但遗憾的是我到目前为止找不到它。
有没有人可以给我更多关于这个的见解?提前致谢:
import React, { useState, useEffect } from "react";
import { Form, TasksContainer, TaskWrapper } from "../styledApp";
// ========= STARTING POINT =========
const SearchInput = () => {
// ========= STATES & EFFECTS =========
const [taskValue, setTaskValue] = useState("");
const [allTasks, setAllTasks] = useState(() => {
const persistedTasks = localStorage.getItem("tasks");
if (persistedTasks) {
return JSON.parse(persistedTasks);
} else {
return [];
}
});
const [currentTask, setCurrentTask] = useState({});
const [isEditing, setIsEditing] = useState(false);
useEffect(() => {
localStorage.setItem("tasks", JSON.stringify(allTasks));
}, [allTasks]);
// ========= FUNCTIONS =========
// ========= add related =========
const handleChange = (e) => {
setTaskValue(e.target.value);
};
const handleSubmit = (e) => {
e.preventDefault();
if (taskValue !== "") {
setAllTasks([
...allTasks,
{ id: allTasks.length + 1, text: taskValue.trim() },
]);
}
setTaskValue("");
};
// ========= delete related =========
// ***** not created yet *****
// ========= edit related =========
const handleEditClick = (todo) => {
setIsEditing(true);
setCurrentTask({ ...todo });
};
const handleChangeEditInput = (e) => {
setCurrentTask({ ...currentTask, text: e.target.value });
};
const handleUpdateTodo = (id, updatedTodo) => {
const updatedItem = allTasks.map((todo) => {
return todo.id === id ? updatedTodo : todo;
});
setIsEditing(false);
setAllTasks(updatedItem);
};
const handleEditFormSubmit = (e) => {
e.preventDefault();
handleUpdateTodo(currentTask.id, currentTask);
};
// ========= JSX RENDERING =========
return (
<>
{isEditing ? (
<Form>
<input
name="editTodo"
type="text"
placeholder="Edit the task..."
value={currentTask.text}
onChange={handleChangeEditInput}
/>
<button type="submit" onClick={handleEditFormSubmit}>
Update the Task
</button>
<button onClick={() => setIsEditing(false)}>Cancel</button>
</Form>
) : (
<Form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Add a task..."
value={taskValue}
onChange={handleChange}
/>
<button type="submit">Submit the Task</button>
</Form>
)}
<TasksContainer>
{!allTasks.length && <p>No tasks</p>}
{!!allTasks.length && (
<ul>
{allTasks.map((task) => (
<div key={task.id}>
<TaskWrapper>
<li>{task.text} </li>
<div>
<button
id={task.id}
value={task.text}
onClick={handleEditClick(task)}
>
Edit
</button>
<button>Delete</button>
</div>
</TaskWrapper>
</div>
))}
</ul>
)}
</TasksContainer>
</>
);
};
export default SearchInput;
那是因为编辑按钮
<button
id={task.id}
value={task.text}
onClick={handleEditClick(task)} >
Edit
</button>
onClick应该是函数引用,如
onClick={(_) => handleEditClick(task)}