react往ul里面添加列表，报错

Question

刚开始学react，想问一下，用一个add的button，下面是一个ul，然后实现每点击一次button，往下面的ul里面添加li，下面的代码怎么报错了，报错的是this.state.listitem.push is not a function

const numbers = [1, 2, 3, 4, 5];
var index=0;
class App extends React.Component{
 constructor(props){
   super(props);
   this.state={listitem:[]};
   this.handleClick = this.handleClick.bind(this);
 }
  handleClick() {
    this.setState(
      listitem: this.state.listitem.push(<li>{numbers[0]}</li>);
    );
 }
 render(){
  return (
   <div>
   <button onClick={this.handleClick}>
       Add
   </button>
  <ul>{this.state.listitem}</ul>    
  </div>
 )
 }
}
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Answer 1

push不是一个函数 说明前边不是数组 没有push这个方法 只有数组才有push方法 还有push返回值是数组的length

Answer 2

https://codesandbox.io/s/ryyz...

Answer 3

handleClick=()=> {

let {listitem}=this.state
listitem.push(<li>{numbers[0]}</li>)
this.setState({
  listitem
});

}

Answer 4

const numbers = [1.1, 2.2, 3.3, 4.4, 5.5];
let index = 0
class App extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        listitem: [7,8,9]
    };
}

handleClick() {
    console.log(numbers[0])
    let tempArray = this.state.listitem
    if (index < numbers.length) {
        tempArray.push(numbers[index])
        this.setState({
            listitem: tempArray
        })
        index++
    }
}


render() {
    return (
        <div>
            <button onClick={(() => {
                this.handleClick()
            })}>
                Add
            </button>
            {
                this.state.listitem.map((list, index) => {
                    return (<li key={index}>{list}</li>)
                })
            }

        </div>
    )
}

}

ReactDom.render(

<App/>,
document.getElementById('app')

);