鍍金池/ 問答/HTML/ React怎么向數(shù)組中插入數(shù)據(jù)，并調(diào)用render使頁面渲染

React怎么向數(shù)組中插入數(shù)據(jù)，并調(diào)用render使頁面渲染

class Demo extends Component{

constructor(){
    super()
    this.state = {
        dataSource:[],
        columns:[{ key: 'data', title: '數(shù)據(jù)', dataIndex: 'data'}],
    }
}
onClick = () => {
  this.state.dataSource.push({key:'1',data:'1'})
  console.log(this.state.dataSource)
}
render(){
    return(
        <div>
          <Table dataSource={this.state.dataSource} columns={this.state.columns}></Table>
          <Button onClick={this.onClick}>add</Button>  
        </div>
    )
}

}
大佬們看代碼
目的：點(diǎn)按鈕 頁面中的表格增加一組數(shù)據(jù)
要讓react渲染頁面 得使用setstate方法
可是push方法返回的值是數(shù)組的長度 并不是數(shù)組的數(shù)據(jù)
我不能直接setState({dataSource:this.state.dataSource.push({key:'1',data:'1'})})
那我怎么使用setState呢 怎么插入新值到數(shù)組中的時(shí)候讓react渲染數(shù)據(jù)到表格里呢### 題目描述

回答
編輯回答
維他命

你這還需要補(bǔ)的知識很多。
js中的push是修改原數(shù)組，不會返回新數(shù)組。
react中props和state任何一個(gè)值變了，都會render的。
所以你的代碼應(yīng)該如下：

class Demo extends Component{

constructor(props){
    super(props)
    this.state = {
        dataSource:[],
        columns:[{ key: 'data', title: '數(shù)據(jù)', dataIndex: 'data'}],
    }
}
onClick = () => {
  let {dataSource = []} = this.state;
  dataSource.push({key:'1',data:'1'});
  this.setState({dataSource});
}
render(){
    return(
        <div>
          <Table dataSource={this.state.dataSource} columns={this.state.columns}></Table>
          <Button onClick={this.onClick}>add</Button>  
        </div>
    )
}
}
2017年4月30日 19:10
編輯回答
孤客

使用this.setState()設(shè)置state，不推薦直接賦值

2017年10月16日 04:34
編輯回答
溫衫
this.setState({
    dataSource:[{key:'1',data:'1'}]
})
2017年6月1日 18:05