我正在创建一个paginate组件,我遇到了传递给这个paginate组件的props的问题。元素道具会自动更新,因此我无法使用componentWillReceiveProps来更新我的组件。
这是我的父组件渲染和回调Paginate的组件:
class AlarmManagement extends React.Component{
constructor(props){
super(props)
this.state = {
alarms: undefined,
nameIsOrdered: false,
codeIsOrdered: true,
priorityIsOrdered: false,
alarmsPaginate: undefined,
}
this.orderByName = this.orderByName.bind(this)
this.orderByCode = this.orderByCode.bind(this)
this.orderByPriority = this.orderByPriority.bind(this)
this.getAlarms = this.getAlarms.bind(this)
this.getAlarmsPaginate = this.getAlarmsPaginate.bind(this)
}
componentWillMount(){
this.getAlarms()
}
getAlarms(){
$.ajax({
type: 'GET',
url: '/api/alarm-event-types/',
headers: { 'Authorization': "Token " + localStorage.token },
success: (alarms) => {
this.setState({
alarms: alarms.sort((a, b) => a.code - b.code)
})
},
error: (fail) => console.log(fail)
})
}
getAlarmsPaginate(page, amount) {
const newAlarms = this.state.alarms
this.setState({ alarmsPaginate: newAlarms.slice(page, amount) });
}
componentWillReceiveProps({emergency}){
if(emergency !== undefined && emergency !== null){
let updateList = [],
shouldUpdate = false
emergency.forEach((el, index) => {
if(el.update){
updateList.push(index)
}
if(el.update == "alarm"){
shouldUpdate = true
}
})
if(shouldUpdate){
this.getAlarms()
}
updateList.forEach((el) => {
if(this.props.clearList){
this.props.clearList(el)
}
})
}
}
orderByName(){
let alarms = this.state.alarms
if(this.state.nameIsOrdered === true){
this.setState({
alarms: alarms.sort((a, b) => {
let nameA = `${a.name.toUpperCase()}`,
nameB = `${b.name.toUpperCase()}`
if (nameA > nameB) {
return 1;
}
if (nameA < nameB) {
return -1;
}
return 0;
}),
nameIsOrdered: false,
codeIsOrdered: false,
priorityIsOrdered: false
})
}
else{
this.setState({
alarms: alarms.sort((a, b) => {
let nameA = `${a.name.toUpperCase()}`,
nameB = `${b.name.toUpperCase()}`
if (nameB > nameA) {
return 1;
}
if (nameB < nameA) {
return -1;
}
return 0;
}),
nameIsOrdered: true,
codeIsOrdered: false,
priorityIsOrdered: false
})
}
}
orderByCode(){
let alarms = this.state.alarms
if(this.state.codeIsOrdered === true){
this.setState({
alarms: alarms.sort((a, b) => b.code - a.code),
codeIsOrdered: false,
nameIsOrdered: false,
priorityIsOrdered: false
})
}
else{
this.setState({
alarms: alarms.sort((a, b) => a.code - b.code),
codeIsOrdered: true,
nameIsOrdered: false,
priorityIsOrdered: false
})
}
}
orderByPriority(){
let alarms = this.state.alarms
if(this.state.priorityIsOrdered === true){
this.setState({
alarms: alarms.sort((a, b) => b.priority - a.priority),
nameIsOrdered: false,
codeIsOrdered: false
})
}
else{
this.setState({
alarms: alarms.sort((a, b) => a.priority - b.priority),
nameIsOrdered: false,
codeIsOrdered: false
})
}
this.setState(prevState => ({
priorityIsOrdered: !prevState.priorityIsOrdered,
}))
}
render(){
const alarms = this.state.alarms,
alarmsPaginate = this.state.alarmsPaginate;
return(
this.props.user.groups == 1 ? (
<div className="contactto-middle-content">
<ManagementMenu/>
<div className="management-content">
<div className="list-management-subtitle">ALARMES</div>
<button type="button" className="btn btn--save-attend-or-add-someone btn--color-tecno" onClick={() => browserHistory.push('/app/alarms/form/add')}>
<div><span className="btn--bold">+ ADICIONAR</span> ALARME</div>
</button>
{alarms &&
<div className="list-table">
<Paginate outerClass="paginate-wrapper" filterElements={this.getAlarmsPaginate} maxElements={5} elements={alarms} />
<div className="list-table-header">
<div className="left list-table--200"><span className="icons-order clickable" onClick={this.orderByName}>Nome<Order width="15" height="10"/></span></div>
<div className="left list-table--200"><span className="icons-order clickable" onClick={this.orderByCode}>Código<Order width="15" height="10"/></span></div>
<div className="left list-table--200"><span className="icons-order clickable" onClick={this.orderByPriority}>Prioridade<Order width="15" height="10"/></span></div>
<div className="list-table-body-column--action--2icons"></div>
</div>
<div className="list-table-body scroll">
{alarmsPaginate && alarmsPaginate.map((alarm) =>
<AlarmRow key={alarm.code} alarm={alarm} getAlarms={this.getAlarms} channelId={this.props.channelId} iconDetail={this.refs["iconDetail"]}/>
)}
</div>
</div>
}
</div>
</div>
):
<div className="error">Página não pode ser acessada, pois você não é um administrador</div>
)
}
}
export default AlarmManagement
这是我的Paginate组件:
export default class Paginate extends React.Component{
constructor(props){
super(props)
this.state = {
pagesNumber: undefined,
elements: undefined,
elementsNumber: undefined,
startNumber: undefined,
endNumber: undefined,
pos: undefined,
}
this.nextList = this.nextList.bind(this)
this.previousList = this.previousList.bind(this)
}
previousList(){
if(this.state.pos > 1){
let pos = this.state.pos - 1
this.changePage(pos)
}
}
nextList(){
if(this.state.pos < this.state.pagesNumber){
let pos = this.state.pos + 1
this.changePage(pos)
}
}
changePage(pos){
const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
const newEndNumber = this.props.maxElements * pos > this.state.elementsNumber ? this.state.elementsNumber : this.props.maxElements * pos;
this.props.filterElements(newStartNumber, newEndNumber);
this.setState({
pos: pos,
startNumber: newStartNumber,
endNumber: newEndNumber,
});
}
componentWillReceiveProps(nextProps){
console.log(nextProps.elements != this.props.elements ? 'different' : 'equal')
}
componentWillMount(){
this.setState((prevState, props) => ({
pagesNumber: props.elements ? Math.ceil(props.elements.length / props.maxElements) : 0,
elements: props.elements,
elementsNumber: props.elements.length,
startNumber: 1,
endNumber: props.maxElements,
pos: 1,
}));
if(this.props.filterElements){
this.props.filterElements(0, this.props.maxElements)
}
}
render(){
const elementsNumber = this.state.elementsNumber,
startNumber = this.state.startNumber,
endNumber = this.state.endNumber;
return(
<div className={this.props.outerClass}>
{elementsNumber > this.props.maxElements &&
<div className="left contactto-100">
{elementsNumber && <span className="left">{`${startNumber === 0 ? 1 : startNumber}-${endNumber} de ${elementsNumber}`}</span>}
<span className="paginate-arrow paginate-arrow-left" onClick={this.previousList}></span>
<span className="paginate-arrow paginate-arrow-right" onClick={this.nextList}></span>
</div>
}
</div>
)
}
}
Paginate.defaultProps = {
outerClass: 'paginate-wrapper'
}
Paginate.propTypes = {
outerClass: React.PropTypes.string,
filterElements: React.PropTypes.func.isRequired,
maxElements: React.PropTypes.number.isRequired,
elements: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
}
在componentWillReceive道具上记录的元素是相同的。
在帖子建议后更新了代码,但是: componentWillReceiveProps(nextProps){ console.log(nextProps.elements!= this.props.elements?'different':'equal')//仍然相等 }
有什么问题?
提前致谢。
答案 0 :(得分:2)
目前还不是很清楚你的问题是什么,或者你的代码是如何运作的。但是,你在代码中做了一些非常不明智的事情......
changePage(pos){
this.state.startNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
this.state.endNumber = this.props.maxElements * pos > this.state.elementsNumber ? this.state.elementsNumber : this.props.maxElements * pos;
this.props.filterElements(this.state.elements, this.state.startNumber, this.state.endNumber);
this.setState({
pos: pos,
startNumber: this.state.startNumber,
endNumber: this.state.endNumber
});
}
虽然您正在使用setState()在函数末尾更新状态,但在此之前您将直接改变状态。您可以通过使用临时变量来保存新状态或通过在setState调用中进行计算来解决此问题。例如。
changePage(pos){
const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
const newEndNumber = this.props.maxElements * pos > this.state.elementsNumber ? this.state.elementsNumber : this.props.maxElements * pos;
this.props.filterElements(this.state.elements, newStartNumber, newEndNumber);
this.setState({
pos: pos,
startNumber: newStartNumber,
endNumber: newEndNumber
});
}
在构造函数或componentWillReceiveProps()方法中使用props来设置状态也是一种反模式。通常在React应用程序中,我们希望有一个单一的事实来源 - 即所有数据都由一个组件负责,而且只有一个组件。此组件负责将数据存储在其状态中,并通过props将数据分发到其他组件。
当你这样做时......
constructor(props){
super(props)
this.state = {
elements: this.props.elements,
...
}
...
}
父和子组件现在都是其州内的管理元素。如果我们更新子级中的state.elements,则这些更改将不反映在父级中。我们失去了单一的事实来源,通过我们的应用程序跟踪数据流变得越来越困难。
在您的特定情况下,Parent组件有责任维护其状态内的元素。 Child组件将元素作为props接收 - 它不应将它们存储为state或以任何方式直接更新元素。如果对Child的操作需要更新元素,则需要通过从Parent传递给它的函数作为道具来完成。
我上面用作例子的changePage函数可以变成......
changePage(pos){
const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
const newEndNumber = this.props.maxElements * pos > this.props.elements.length ? this.props.elements.length : this.props.maxElements * pos;
this.props.filterElements(this.props.elements, newStartNumber, newEndNumber);
this.setState({
pos: pos,
startNumber: newStartNumber,
endNumber: newEndNumber
});
}
但是,我们可以更进一步 - 为什么我们需要将this.props.elements传递给filterElements函数?父组件必须已经具有对元素的引用;毕竟它首先给了我们!
changePage(pos){
const newStartNumber = pos === 1 ? 0 : this.props.maxElements * (pos - 1);
const newEndNumber = this.props.maxElements * pos > this.props.elements.length ? this.props.elements.length : this.props.maxElements * pos;
this.props.filterElements(newStartNumber, newEndNumber);
this.setState({
pos: pos,
startNumber: newStartNumber,
endNumber: newEndNumber
});
}
在您的父组件中,您将更改功能...
getAlarmsPaginate(alarms, page, amount) {
this.state.alarmsPaginate = alarms.slice(page, amount)
this.setState({ alarmsPaginate: this.state.alarmsPaginate })
}
...成
getAlarmsPaginate(page, amount) {
const newAlarmsPaginate = this.state.alarms.slice(page, amount);
this.setState({ alarmsPaginate: newAlarmsPaginate });
}
注意我们直接切割this.state.alarms而不是函数参数 - 我们也不再改变我们的状态 - 而是仅使用setState函数。
还有几个实例,你在整个代码中使用道具和不恰当的状态 - 我会仔细检查并确保你遵循我上面列出的指导原则 - 或者更好地去阅读React Documentation 。您可能会发现,当您遵循这些做法时,您的问题会解决,但如果没有,请在此处使用修改后的代码进行回复,我将很乐意为您提供进一步的帮助。
父组件:
class Parent extends React.Component {
constructor() {
super();
// our parent maintains an array of all elements in its state,
// as well as the current page, and the number of items per page.
// getSampleData can be seen in the fiddle - it just makes an array
// of objects for us to render
this.state = {
allElements: getSampleData(),
page: 1,
numPerPage: 10
};
}
// we pass this function as a prop to our Paginate component to allow
// it to update the state of Parent
setPage(pageNum) {
this.setState({
page: pageNum
});
}
render() {
// get the appropriate elements from our own state
const firstItem = (this.state.page - 1) * this.state.numPerPage;
const lastItem = this.state.page * this.state.numPerPage;
const elementRender =
this.state.allElements
.slice(firstItem, lastItem)
.map(element => {
return (
<div key={element.itemNumber}>{element.itemName}</div>
);
});
// numberOfElements, numPerPage and the setPage function from
// Parent's state are passed
// to the paginate component as props
return (
<div>
<Paginate
numberOfElements={this.state.allElements.length}
numPerPage={this.state.numPerPage}
setPage={this.setPage.bind(this)}
/>
{elementRender}
</div>
);
}
}
Paginate组件:
class Paginate extends React.Component {
render() {
const numberOfButtons = Math.ceil(this.props.numberOfElements / this.props.numPerPage);
const buttons = [];
// make a first page button
buttons.push(<button key={0} onClick={() => this.props.setPage(1)}>First Page</button>);
let i = 0;
// add a button for each page we need
while (i < numberOfButtons) {
const page = ++i;
buttons.push(
<button
key={i}
onClick={() => this.props.setPage(page)}
>
Page {i}
</button>
);
}
// add a last page button
buttons.push(<button key={i+1} onClick={() => this.props.setPage(i)}>Last Page</button>);
return (
<div>
{buttons}
</div>
);
}
}