此问题在此处已有答案:
Correct way to push into state array(15个答案)
4小时前关门了。
我刚刚开始学习如何使用React,我遇到了一个问题,我似乎仍然无法解决。
我正在尝试编写一个简单的应用程序,用于添加任务,比如一个简单的待办事项列表。
但是当我想通过useState
添加一个任务并保存数据时,新的数据并没有写入页面。
我在文件AllTasks.js中有代码:
const [myTasks, setMyTasks] = useState(data);
const tasksHandler = (id) => {
const filteredTasks = myTasks.filter((oneTask) =>{
return oneTask.id !== id;
})
setMyTasks(filteredTasks);
}
const checkID = () => {
for(let i = 0; i < myTasks.length; i++){
if(i === myTasks.length -1){
return myTasks[i].id + 1;
}
}
}
const addNewTask = (newTask) => {
let task = {
id: checkID(),
name: newTask
};
const newTasks = myTasks;
newTasks.push(task);
setMyTasks(newTasks);
}
const deleteAllTasks = () => {
setMyTasks([]);
}
return(
<div className='tasks'>
<Title />
<AddTasks addTask={addNewTask}/>
{
myTasks.map((oneTask) => {
const {id, name} = oneTask;
return <div className='one-task' key={id}>
<p>{name}</p>
<button onClick={() => tasksHandler(id)}><img src={deleteImg} alt='todoApp'/></button>
</div>
})
}
<button className='main-button' onClick={deleteAllTasks}>Delete all tasks</button>
</div>
)
}
export default AllTasks;
AddTask.js文件中用于将新任务发送到AllTasks.js文件的代码
import './AddTask.css';
import addImg from "../img/plus.png";
const AddTask = (props) => {
const add = () => {
const input = document.getElementById('new-task');
const newTask = input.value;
if(input.value.length > 0){
props.addTask(newTask);
}
}
return(
<div className='add-task'>
<input type='text' id='new-task'></input>
<button id='send-task' onClick={add}><img src={addImg} alt='todoApp'/></button>
</div>
)
}
export default AddTask;
我不明白为什么当我点击添加任务并运行addNewTask()
函数时,为什么添加的任务没有出现在页面上?当我通过setMyTasks(newTaskt)
将新数据上传到myTasks时?
谢谢大家的回复。
3条答案
按热度按时间nbysray51#
这是因为您要在现有数组中添加新数据,react需要一个全新的数组来更新其状态并跟踪状态。
在
addNewTask
函数中不是向现有数组中添加元素而是应该执行或者简写为
setState(prev => [...prev, newElement])
f1tvaqid2#
尝试将addNewTask函数的最后一行从
setMyTasks(newTasks);
更改为setMyTasks([...newTasks]);
zf9nrax13#
应使用不可变状态设置: