时间戳

首页 > 解决方案 > 反应不在渲染上重新排序组件数组

javascript - 反应不在渲染上重新排序组件数组

问题描述

我正在尝试按顺序呈现组件列表，该组件正在更新这个元素数组，但没有重新排序它们。

伪代码；

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 的结果，则项目正在数组中重新排序，但是表单渲染不会以新顺序重新渲染内容

标签： javascriptreactjsjsx

解决方案

如果您的数组顺序可能会发生变化，则不应使用数组索引作为键。密钥应该是永久的，因为 React 使用密钥来识别组件，如果一个组件接收到一个以前属于不同组件的密钥，React 认为它和以前是同一个组件。

为您的元素创建对这些元素永久存在的唯一键。

推荐阅读