今天在写代码的时候用到redux状态管理工具,碰到了一个问题,花了好长时间才解决掉,现在分享一下,以后如果有遇到的就不用浪费事件了。
首先,多话不说,写一个简单的案例。
建立一个store文件,在文件下建立reducer.jsx文件
const initialState = {
todus:[
{
"id":1,
text:"aa"
}
]
}
export default (state = initialState, { type, text }) => {
switch (type) {
case "ADD":
let newState = {...state}
newState.todus.push({
id:Date.now(),
text
})
console.log(newState)
return newState;
default:
return state
}
}
首页就是一个简单的文本框和设置了一个回车事件.
add=(e)=>{
if(e.keyCode===13){
if(e.target.value.trim()==="") return
this.props.addAction(e.target.value);
e.target.value="";
}
}
render() {
return (
<div>
<input type="text" onKeyUp={this.add}/>
<ul>
{
this.props.todus.map((item)=>{
return (
<li key={item.id}>
{item.text}
</li>)
})
}
</ul>
</div>
)
}
这样网页首页的效果就是很简单的一个input框,和库里边的一条数据.
我们在文本框写好数据按了回车键之后,我遇到的坑就出现了,
按下之后会发现页面没有丝毫的反应,通过打印库里的值却发现库里边有值,但是却没有渲染.效果如下
这是什么原因呢?我找了很久,最后发现这是一个关于深拷贝和浅拷贝的问题.因为ES6中,扩展运算符是浅拷贝,他只能拷贝第一层对象,第二次是浅拷贝,所有他没有改变,也就造成了没有渲染出来的原因.解决的办法很简单,只需要把他转为深拷贝就可以了.以下咱们用一下ES6中的字符串转对象,然后再给他转回来就可以.代码如下:
export default (state = initialState, { type, text }) => {
switch (type) {
case "ADD":
// let newState = {...state}
var newState=JSON.parse(JSON.stringify(state));
newState.todus.push({
id:Date.now(),
text
})
console.log(newState)
return newState;
default:
return state
}
}
最后,我们的问题完美解决.
这就是我遇到的一点小坑,希望能对阅读的你有一点小小的帮助.