this.setState({list})键和值一样可以这么写代码

const list = [...this.state.list]，拷贝副本list，操作list比直接操作this.state.list易于排错。根据list下标删除数据

const ls = [...this.tate.list]; 表示拷贝list的值到ls

ls.splice(index, 1); 表示删除副本的一个值。

this.setStete ({

 list: ls

});

不建议直接操作原来的数组，这样写性能低下，有些新特性无法使用。

即不建议这样写：

this.state.list.splice(index, 1);

this.setState({

    list: this.state.list

});

React不直接操作DOM，删除功能操作的是数据

通过数据下标做删除功能，下标一般用数据库id，实在没办法采用数组索引

通过 splice方法做数组删除

｜ list.splice(index, 1);

尽量不要直接操作 state数据，而是复制出一个副本

｜ const list = this.state.list;

  handleItemChange(index){
    const list = this.state.list;
    list.splice(index, 1);
    this.setState({ list })
  }

//函数组件写法

const ToDoList=()=> {
    const [val,setVal] = useState('')
    const [list,setList] = useState([])
   
    const butClick=()=>{
      setList([...list,val])
      setVal('')
    }
    const inputChange=(e)=>{
      setVal(e.target.value)
    }
    const itemDel=(e)=>{
      let newList=list
      let i=e.target.dataset.inx
      newList.splice(i,1)
      setList([...newList])
    }
    useEffect(()=>{
      console.log(list)
    },[list])
    
  return (
    <div className="ToDoList">
      <div>
        <input value={val} onChange={inputChange} />
        <button onClick={butClick}>add</button>
      </div>
      <ul>
        {
          list.map((item,index)=>{
            return <li key={index} data-inx={index} onClick={itemDel}>{item}</li>
          })
          //其他传参方式 这两种每次组件渲染时会创建一个新的函数影响性能
          //箭头函数 onClick={()=>itemDel(index)}  绑定 onClick={itemDel.bind(this,index)}
        }
      </ul>
    </div>
  );
}

<li key={index}  onClick = {this.handledel.bind(this,index)}

constructor(props){

  super(props)

  this.state = {

     list:xxxx

  }

}

handledel(index){

      const list = [...this.state.list]

      list.splice(index,1)

      this.setState({

          list: list

      })

}

在删除时的注意事项.

react中如果需要操作state中的数据，不要直接修改，应该先复制一个副本，操作副本中的数据，之后再赋值给state。

原因：1.在使用一些工具调试时会比较方便；2.后期使用一些比较复杂的框架时，直接操作的错误写法会导致代码性能低下。

儘量不要直接去改變state裡面的數據，而是生成一個副本去修改，然後重新對state賦值。

在ES6中，如果key、value同名，可以省略成this.setState({list});

儘量不要直接修改state裡面的數據，而是生成一個副本去修改後再去賦值

ES6中，若鍵和值同名稱，可以省略成
this.setState({list})

<li key={index} onClick={this.handleItemDelet.bind(this,)}>{item}</li>

把 index參數傳進去

import React from 'react';

//React避免 Dom 操作，主要是面向数据操作;
  class ToDoList extends React.Component{

      //state存放数据的地方；
      constructor(props){
          super(props);
          this.state = {
             list:[],
             inputValue:''
          }

      }

      //修改state用setState；
      handleBtnClick(){
          this.setState({
              list:[
                  ...this.state.list,//...:数组展开符；
                  this.state.inputValue
              ],
              inputValue:''//为了让点击后input值清空；
          });
      }

      //监听input值变化；
      handleBtnChange(e){
          this.setState(
              {
                  inputValue:e.target.value //获取变化值；
              }
          );
      }

      //删除点击的列表项；
      handleItemDelet(index){

          //这一步相当于复制list（即副本）；在React中对state数据进项操作时，建议对副本操作，提高代码可调实性；
          const list = [...this.state.list];
          list.splice(index,1);
          this.setState({
              list    //list : list的简化，当key=value时可简化；
          })


      }
    render(){
      return (
          <div>
              <div>
                  <input value={this.state.inputValue} onChange={this.handleBtnChange.bind(this)}></input>
                  <button onClick={this.handleBtnClick.bind(this)}>add</button>
              </div>
              <ul>
                  {this.state.list.map((item,index)=>{    //循环list；
                      return <li key={index} onClick={this.handleItemDelet.bind(this,index)}>{item}</li>
                  })}
              </ul>
          </div>
      );
    }
}


export default ToDoList;

尽量不要直接修改state里面的数据，而是生成一个副本去修改后再去赋值

import React,{ Component } from 'react';
class TodoList extends Component{
handlerClick(){
this.setState({
list:[...this.state.list,this.state.inputvalue],
inputvalue:''
})
//this.state.list.push('1');
}
handleInput(e){
this.setState({
inputvalue:e.target.value
});
}
handlerDel(index){
const list=[...this.state.list];
list.splice(index,1);
this.setState({list});
}
//构造器
constructor(props){
super(props);
this.state={
list:[
'learn react',
'learn english',
'learn vue'
],
inputvalue:''
}
}
render(){
return(
<div>
<div>
<input value={this.state.inputvalue} onChange={this.handleInput.bind(this)}/>
<button onClick={this.handlerClick.bind(this)}>add</button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index} onClick={this.handlerDel.bind(this,index)}>{item}</li>
})
}
</ul>
</div>
);
}
}
export default TodoList;

讲的不错，算是给我这个小白解惑了，以前真的是这么修改list的。以后知道要多...this.state.value。改数组要拷贝一份出来改

//添加绑定事件 
<li key={index} onClick={this.handleItemClick.bind(this,index)}>{item}</li>

//删除列表的绑定事件
handleItemClick(index){
    const list = [...this.state.list]; //复制副本操作
    list.splice(index,1); //删除对应角标列表
    this.setState({
        list:list //新list替换老list
    })
}

react 操作数据，不需要操作dom ;
在react 中操作 state中的数据，尽量不直接操作state的数据，而是拿一个变量接收后，再操作该变量
如删除函数 

handleItemClick (index){

    const newList = [...this.state.list];  // 拿newList接收 state中list的值

    newList.splice(index,1); //删除newList中de 该 index的值

    //将删除后的数组放置在state中，

        this.setState({

            list:newList

        })

}

删除内容的事项

// es6值拷贝的语法
const list = [...this.state.list];

// 删除数据对象相应索引的值，并指定连续删除的个数
list.splice(index, 1); //在list数组中，删除索引值为index的元素，删除位数为1

sdfasdfsad

删除item

setState键值名称一样时，写一个就可以

尽量不直接操作state的值，拷贝出副本，操作副本，再赋值给state