Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state

#1

点击添加就会报错增加不了

import React, { Component } from 'react'
export default class Twocomponent extends Component {
  constructor(props) {
    super(props)
    this.addItem = this.addItem.bind(this)
    this.change = this.change.bind(this)
    // this.delete = this.delete.bind(this)
    this.state = {
      list: [],
      value: 'aa'
    } 
  }
  change (event) {
    this.state.value = event.target.value
    this.setState({
      value: this.state.value
    })
  }
  addItem () {
    console.log('333')
    // if(this.state.value.trim() !== ''){
      const newList = [...this.state.list,this.state.value]
      console.log(newList,'newList')
      this.setState({
        list: newList,
        value: ''
      })
      console.log(this.state.list,'11')
    // }
  }
  delete (index) {
    const newList = [...this.state.list]
    newList.splice(index,1)
    this.setState({
      list: newList,
    })
  }
  render() {
    return (
      <div>
        <div>
          <input type="text" className="text" value={this.state.value}
          onChange={this.change}/>
          <span onClick={this.addItem}>添加</span>
          <ul>
            {this.state.list.map((item,index)=>
              <li key={index}><span>{item}</span>
              <span style={{display: 'inline-block',marginLeft: 200,cursor: 'pointer'}}
              onClick={this.delete(index)}>xxx</span></li>)}
          </ul>
        </div>
      </div>
    )
  }
}
#2

onClick={()=> this.delete(index)}