为什么我setState之后没有重新渲染组件,我几乎所有方法都试过了

#1

import React, { Component } from ‘react’;
import TableFilter from ‘./TableFilter’;
import CustomTable from ‘./CustomTable’;

export default class AuthorityTable extends Component {
static displayName = ‘AuthorityTable’;

static propTypes = {};

static defaultProps = {};

constructor(props) {
super(props);
this.state = {
current:1,
dataSource:[],
total:100,
limit:10,
};
}
shouldComponentUpdate(){
return true;
}
search=(username,sex,status)=>{
console.log(username+sex+status);
this.setState({
total:200
})
}
render() {
return (





);
}
}

const styles = {};
这是父组件其中包含两个组件,一个是表格,一个是表格筛选条件
表格筛选条件里传入了一个父组件的方法,表格筛选组件选择筛选项后回调,在父组件里修改他的state,为什么他的表格子组件没有被重新渲染

筛选组件
import React, { Component } from ‘react’;
import { Button, Input, Select } from ‘@icedesign/base’;

export default class TableFilter extends Component {
static displayName = ‘TableFilter’;

constructor(props) {
super(props);
this.state = {
username:“xx”,
sex:“all”,
status:“1”,
};
}
handleClickButton =()=>{
var state=this.state;
this.props.search(state.username,state.sex,state.status);
}
handleSelectSex =(value)=>{
this.setState({
sex:value
})
}
handleSelectStatus =(value)=>{
this.setState({
status:value
})
}
handleChangeInput =(value)=>{
this.setState({
username:value
})
}
render() {
return (


用户管理



真实姓名:



性别:
<Select style={{ width: ‘200px’ }} value={this.state.sex} onChange={this.handleSelectSex.bind(this)}>
<Select.Option value=“all”>全部</Select.Option>
<Select.Option value=“man”>男</Select.Option>
<Select.Option value=“woman”>女</Select.Option>



状态:
<Select style={{ width: ‘200px’ }} value={this.state.status} onChange={this.handleSelectStatus.bind(this)}>
<Select.Option value=“all”>全部</Select.Option>
<Select.Option value=“1”>正在使用</Select.Option>
<Select.Option value=“0”>停用</Select.Option>



查询



);
}
}

const styles = {
tableFilter: {
display: ‘flex’,
alignItems: ‘center’,
justifyContent: ‘space-between’,
padding: ‘20px’,
marginBottom: ‘20px’,
background: ‘#fff’,
},
title: {
height: ‘20px’,
lineHeight: ‘20px’,
color: ‘#333’,
fontSize: ‘18px’,
fontWeight: ‘bold’,
paddingLeft: ‘12px’,
borderLeft: ‘4px solid #666’,
},
filter: {
display: ‘flex’,
},
filterItem: {
display: ‘flex’,
alignItems: ‘center’,
marginLeft: ‘20px’,
},
filterLabel: {
fontWeight: ‘500’,
color: ‘#999’,
},
submitButton: {
marginLeft: ‘20px’,
},
};

表格组件
import React, { Component } from ‘react’;
import { Table, Pagination, Balloon, Icon } from ‘@icedesign/base’;
import axios from ‘axios’;

export default class Home extends Component {
static displayName = ‘Home’;

constructor(props) {
super(props);
this.state = { //继承父组件的值
current: this.props.current,
dataSource: this.props.dataSource,
total: this.props.total,
limit: this.props.limit,
};
}

getData = (page,limit) => {
	const _this=this;    //先存一下this,以防使用箭头函数this会指向我们不希望它所指向的对象。
	axios({
			method: 'post',
			url: 'http://api.quwancode.com/api.bookdrift.com/web/admin_user/userdata',
			data: 'page='+page+'&&limit='+limit,
		}).then(function (response) {
			//修改状态
			var data=response.data.data;	
			console.log(data);
			_this.setState({
					dataSource: data.data,
					total: data.total,
				});
		})
		.catch(function (error) {
			console.log(error);
		});	
};	



componentDidMount(){		//当组件输出到 DOM 后会执行 componentDidMount()
	this.getData(this.state.current,this.state.limit);
	console.log(this.state.index);
}

handlePagination = (current) => { //翻页操作
this.getData(current,this.state.limit); //读取当页数据
this.setState({
current:current //改变目前页面值
})
};
handleList =(limit)=>{ //每页显示记录选择器改变值 从第一页开始
this.getData(1,limit);
this.setState({
limit:limit, //改变每页记录值
current:1 //从第一页开始
})
}

handleSort = (dataIndex, order) => {
const dataSource = this.state.dataSource.sort((a, b) => {
  const result = a[dataIndex] - b[dataIndex];
  if (order === 'asc') {
    return result > 0 ? 1 : -1;
  }
  return result > 0 ? -1 : 1;
});

this.setState({
  dataSource,
});

};
renderstatus = (value) => {
if(value==1)
value=“正在使用”;
else
value=“停用”;
return (



{value}

);
};
renderOper = () => {
return (



);
};
renderhead = (value) => {
return (
<Balloon
align=“lt”
trigger={}
closable={false}
style={{ lineHeight: ‘24px’ }}
>
{value}

);
};

render() {
return (



<Table.Column width={150} lock=“left” title=“用户ID” dataIndex=“UserID” sortable align=“center”/>
<Table.Column width={100} title=“真实姓名” dataIndex=“UserName”/>
<Table.Column width={150} title=“昵称” dataIndex=“Nickname” />
<Table.Column width={50} title=“性别” dataIndex=“Gender” />
<Table.Column width={140} title=“账户” dataIndex=“Account” />
<Table.Column width={100} title=“密码” dataIndex=“PassWord” />
<Table.Column width={160} title=“邮箱” dataIndex=“EMail” />
<Table.Column width={80} title=“头像” dataIndex=“HeadPicUrl” cell={this.renderhead}/>
<Table.Column width={230} title=“微信OpenID” dataIndex=“WXOpenID” />
<Table.Column width={170} title=“注册时间” dataIndex=“AddTime” />
<Table.Column width={100} title=“状态” dataIndex=“Status” cell={this.renderstatus}/>
<Table.Column width={100} title=“操作” cell={this.renderOper} lock=“right” align=“center”/>

<Pagination
pageSize={this.state.limit} //每页记录数
total={this.state.total} //记录总数
current={this.state.current} //目前页面
onChange={this.handlePagination}//改变页面回调函数
onPageSizeChange={this.handleList}//每页记录选择器改变回调函数
style={styles.pagination}
pageSizeSelector=‘dropdown’ //选择器样式
/>

);
}
}

const styles = {
tableContainer: {
background: ‘#fff’,
paddingBottom: ‘10px’,
},
pagination: {
margin: ‘20px 0’,
textAlign: ‘center’,
},
editIcon: {
color: ‘#999’,
cursor: ‘pointer’,
},
circle: {
display: ‘inline-block’,
background: ‘#28a745’,
width: ‘8px’,
height: ‘8px’,
borderRadius: ‘50px’,
marginRight: ‘4px’,
},
stateText: {
color: ‘#28a745’,
},
head: {
width: ‘50px’,
height: ‘50px’,
borderRadius:‘25px’,
},
};

#2

你可以试一下forceUpdate

#3

你父子传参的子组件数据及时更新了么?