react项目碰到的坑

241 阅读1分钟

1.数组splice、push操作然后更新setState无效的问题

具体情境:一个类函数组件中state包含一个arrlist: [];在某一个地方对arrlist做push操作然后setState后页面数据不变。

原因可能是因为,push方法执行后会直接改变原来state里面的数组,此时执行setState,react因为对比机制arr= arr而没有更新state。

解决方法:

  1. 拷贝新的副本
const { arrList } = this.state;
const newList = [...arrList];     //这里是重点,直接拷贝一份出来,
newList.push({id: 1, value: 'a'});
this.setState({arrList: newList)}; //这样就能更新了
  1. 用cancat等方法赋值更新数组
newList = newList.concat([{id: 1, value: 'a'}]);

2.antd组件中onchange等事件的触发以及传参问题

具体情境:onChange 拥有两个默认参数:Function(checked: boolean, event: Event) 保留一个 checked,增加一个自定义的参数 code。使用箭头函数来实现

onchange={ (checked) => this.xx(checked, code)}

接下来在xx函数中就能拿到这两个值