在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

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

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

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)按鈕 頁(yè)面中的表格增加一組數(shù)據(jù)
要讓react渲染頁(yè)面 得使用setstate方法
可是push方法返回的值是數(shù)組的長(zhǎng)度 并不是數(shù)組的數(shù)據(jù)
我不能直接setState({dataSource:this.state.dataSource.push({key:'1',data:'1'})})
那我怎么使用setState呢 怎么插入新值到數(shù)組中的時(shí)候讓react渲染數(shù)據(jù)到表格里呢### 題目描述

回答
編輯回答
維他命

你這還需要補(bǔ)的知識(shí)很多。
js中的push是修改原數(shù)組,不會(huì)返回新數(shù)組。
react中props和state任何一個(gè)值變了,都會(huì)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