[...this.state.list, this.state.inputVal],报错Unexpected token ...

来源:3-3 实现 TodoList 新增删除功能

weixin_慕码人906790

2019-08-19

list: […this.state.list, this.state.inputVal],报错Unexpected token …,看着像是不识别“…”, 繁是出现“…”的地方都会报错,我的代码如下:
import React, { Component,Fragment} from ‘react’;

class TodoList extends Component{

constructor(props){
	super(props);
	this.state={
		inputVal:'',
		list:[]
	}
}

render(){
	return(
		<Fragment>
	{/*我是注释*/}
			<div>
				TodoList my
				<br/>
				<input 
					value={this.state.inputVal} 
					onChange={this.handleInputChange.bind(this)}
				/> 
				<button onClick={this.handleClick.bind(this)}>按钮</button>
			</div>
			<ul>
				{
					this.state.list.map((item, index) => {
						return (
							<li key={index} onClick={this.Del.bind(this, index)}> {item} </li>
						)
						
					})
				}
			</ul>
		</Fragment>
	)
}

handleInputChange(e){
	this.setState({
		inputVal:e.target.value,
	});
}

handleClick(){
	this.setState({
		list: [...this.state.list, this.state.inputVal],
		// list: [this.state.inputVal],
		inputVal:''
	});
}

Del(index){
	const list=[...this.state.list];
	list.splice(index,1);
	this.setState({
		list:list
	})
}

}

export default TodoList;

写回答

1回答

Dell

2019-08-20

是的,vue-cli版本的问题,可能不支持这个展开运算符,你搜索一下报错的内容,我记得可以找到网上的解决方案,配置下babel就可以了

0
0

React零基础入门到实战,完成企业级项目简书网站开发

主流新技术 React-redux,React-router4,贯穿基础语法

5275 学习 · 2496 问题

查看课程