setState的新版用法

1.新版本的react更新了setState的用法,可以使用箭头函数赋值,效率更高。

				<div>
					<label htmlFor="insertArea">输入内容</label>
					<input 
						id="insertArea"
						className='input'
						value={this.state.inputValue}
						onChange={this.handleInputChange}
						ref={(input) => {this.input = input}}
					/>
					<button onClick={this.handleBtnClick}>提交</button>
				</div>

比如这段代码 ,使用setState方法去给list inputValue赋值,setState提供两个参数,都可以是箭头函数,第一个参数是给state赋值,第二个参数是异步方法完成之后,做的事情,也就是赋值完成之后做什么,这里我们打印一下list的数据个数,如果不写在第二个参数中,打印的个数会少一个,因为setState是异步方法

	handleBtnClick() {
		this.setState((prevState) => ({
			list: [...prevState.list, prevState.inputValue],
			inputValue: ''
		}), () => {
			console.log(this.ul.querySelectorAll('div').length);
		});
	}

2.箭头函数中会提供一个prevState,这个参数代表当前state中的值,未改变的state的值。所以可以替代下面这种写法

	handleBtnClick() {
		this.setState((prevState) => ({
			list: [...this.state.list,this.state.inputValue],
			inputValue: ''
		}), () => {
			console.log(this.ul.querySelectorAll('div').length);
		});
	}

猜你喜欢

转载自blog.csdn.net/lee727n/article/details/107961299