首页 > 代码库 > 解决react不能往setState中传key作为参数的办法

解决react不能往setState中传key作为参数的办法

2024-11-01 02:49:02   205人阅读

有时候我们需要每次单独设置众多state中的一个，但是，都是进行相同的操作，这时候如果每个值都要单独写一个相同的函数的话，违背了don‘t repeat yourself的原则，并给日后的维护埋下了极大的隐患。
这时我们就会想向上抽取，把每次不同的key传递给这个函数，就像下面这样：
this.state = {
　　visibleA: false,
　　visibleB: false,
　　visibleC: false,
}
<button onClick = {this.handleClick.bind( this, "visibleA" )}>
 
handleClick( key )  {
　　this.setState({
　　　　key :  fooArr,
　　});
}
但是因为key不能作为参数传递，然后会无效；因为我们传递给key的实际就是字符串；
=================================================我是华丽的分割线==========================================================
然后经过思考，发现可以尝试使用数组的形式，方法如下
 
this.state = {
　　//设置状态
　　visibleAll: [false, false,false],
}
<button onClick = {this.handleClick.bind( this, 0 )}>　　　　//这时候可以往里面传入数组下标，然后就实现了功能的复用
handleClick( i ) {
　　let fooArr = this.state.visibleAll; 　　
　　fooArr[ i ] = !fooArr[ i ];　　　　
　　this.setState({
　　　　visibleAll: fooArr,
　　});
}
 
总结：然后不能传入key值，但是可以通过把需要操作的值放入一个数组中，这样我们就可以对整个数组中的一个值或者多个值，实现一个函数对其进行操作；实现复用功能。

解决react不能往setState中传key作为参数的办法


联系
我们