[英]React not reordering array of components on render
我正在尝试按顺序呈现组件列表,组件正在更新这个元素数组,但没有重新排序它们。
伪代码;
class Form extends Component {
//
// .... other initialization code and logic
//
updatePositions() {
//
// re-order this.state.page.page_contents
//
this.setState({ page: this.state.page });
}
renderContents() {
return this.state.page.page_content.map((c, i) => {
return (<ContentItem
key={ i }
content={ c }
/>);
});
}
render() {
return (
<div className="row">
<div className="medium-12 columns">
{ this.renderContents() }
</div>
</div>
);
}
}
如果我注销 page.page_content 的结果,项目将在数组中重新排序,但是表单渲染不会以新顺序重新渲染内容
如果您的数组顺序可能会发生变化,则不应使用数组索引作为键。 键应该是永久的,因为 React 使用键来标识组件,如果一个组件收到一个以前属于不同组件的键,React 会认为它和以前是同一个组件。
为您的元素创建唯一键,这些键对这些元素是永久的。
你可以尝试强制更新
renderContents() {
this.forceUpdate();
return this.state.page.page_content.map((c, i) => {
return (<ContentItem
key={ i }
content={ c }
/>);
});
}
不要直接改变this.state
。 将其带入一个新变量,然后将其添加回状态。
永远不要直接改变 this.state,因为之后调用 setState() 可能会替换你所做的改变。 将 this.state 视为不可变的。
来自: https : //reactjs.org/docs/react-component.html
相反,您应该尝试:
updatePositions() {
const page_contents = [...this.state.page.page_contents]
// re order page_contents
this.setState({ page: { page_contents });
}
renderContents() {
return this.state.page.page_content.map((c, i) => {
return (<ContentItem
key={ i }
content={ c }
/>);
});
}
这是你的代码 - key={i}
i 没有改变所以它不会重新渲染组件 - 如果你想重新渲染组件 - 请确保 - 键应该改变。
renderContents() {
return this.state.page.page_content.map(c => {
return (<ContentItem
key={ c }
content={ c }
/>);
});
}
c 是内容 - 如果它发生变化,则组件将重新渲染
this.setState({ page: this.state.page })
这是错误的 - 你试图再次在同一个变量中设置相同的值。
class Form extends Component {
//
// .... other initialization code and logic
//
updatePositions() {
//
// re-order this.state.page.page_contents
//
this.setState({ page: newValueFromAPI.page });
}
render() {
const { page: { page_content } } = this.state
return (
<div className="row">
<div className="medium-12 columns">
{ page_content.length > 0 && (
page_content.map(c => <ContentItem key={c} content={c}/>)
)}
</div>
</div>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.