鍍金池/ 問答/HTML/ react往ul里面添加列表，報錯

react往ul里面添加列表，報錯

剛開始學(xué)react，想問一下，用一個add的button，下面是一個ul，然后實現(xiàn)每點擊一次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')
);
回答
編輯回答
編輯回答
鹿惑

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')

);

2017年7月10日 14:07
編輯回答
命多硬

handleClick=()=> {

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

}

2017年8月2日 17:49
編輯回答
負我心

push不是一個函數(shù) 說明前邊不是數(shù)組 沒有push這個方法 只有數(shù)組才有push方法 還有push返回值是數(shù)組的length

2017年12月16日 02:05