reactjs - Reactjs 待办事项列表 setState
问题描述
我正在学习 ReactJS 并且正在开发一个 Todo 列表应用程序。
在我的页面中,我有一个任务文本框和一个用于将任务添加到项目数组的按钮。我面临一个问题,当我单击“添加任务”按钮添加我的第一个任务时,它似乎第一次没有添加它,然后当我添加我的第二个任务时,添加了第一个任务,但没有添加第二个任务,依此类推。我console.log(this.state.items)
用来知道我有什么物品,问题是下次添加上一个物品。
我只是在学习 React,而不是在技能方面有经验的人,非常感谢任何关于所面临问题以及如何解决它的帮助和解释。
以下是我到目前为止编写的代码。
import React, {Component} from 'react';
class TodoList extends Component{
addTask(event){
//Get task Value
var task = this.refs.name.value;
if(task!==""){
var newItem = {
text : task,
key : Date.now()
}
this.setState({
items : this.state.items.concat(newItem)
});
this.refs.name.value = ""; //Blank out the task input box
}
console.log(this.state.items);
}
constructor(props){
super(props);
this.state = {
items : []
};
this.addTask = this.addTask.bind(this);
}
render(){
return(
<div className = "todolistMain">
<div className="header">
<form>
<input placeholder="Enter Task" id="name" ref = "name"></input>
<button type="button" onClick={this.addTask}>Add Task</button>
</form>
</div>
</div>
);
}
}
export default TodoList;
解决方案
您看到 console.log(this.state.items) 显示以前的状态,因为 setState 是一个异步调用。
问题:-在执行 setState 之前打印控制台日志。
解决方案:- 使用回调,当我们想要在状态改变时执行一些操作/console.log 时使用回调。
更新代码:-
this.setState({
items: this.state.items.concat(newItem)
},()=>{
this.refs.name.value = "";
console.log(this.state.items);
});
希望这可以帮助,
干杯!!
推荐阅读
- ubuntu - 范围小时的 Cron 作业 ubuntu
- oracle - Oracle SUM(TO_NUMBER(REGEXP_SUBSTR WITH DECIMAL NUMBER
- javascript - 来自 Redux 的反应状态更新导致最大更新深度超出错误
- powershell - Powershell:使用键=值更新属性文件
- javascript - 如何找到从 textContent 突出显示的文本的 innerHTML 索引?
- istio - Kiali Bookinfo 示例未显示评级和其他微服务的流量
- android - 方法没有按照 onPressed 中的书面顺序执行
- javascript - javascript回调函数同步
- javascript - React Navigation V5 InitalRouteName 不适用于条件渲染
- google-cloud-platform - 即使使用 oidc 服务帐户身份验证,HTTP 云调度程序作业也无法触发云运行