问题描述
我尝试构建一个简单的虚拟待办事项应用程序,在我设置了用于编辑特定待办事项项的功能后,我的问题出现了。 根据我从浏览器收到的警告,我似乎陷入了无限循环? 我现在试图找出它发生的位置,但遗憾的是到目前为止我找不到它。
有人可以让我更深入地了解这个问题吗?提前致谢:
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)}