Javascript 在渲染时不重新排列组件数组

我试图用react呈现一个组件列表，组件正在更新这个元素数组，但没有对它们重新排序

伪码

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>
    );
  }
}

类表单扩展组件{
//
//..其他初始化代码和逻辑
//
更新位置（）{
//
//重新订购this.state.page.page\u目录
//
this.setState（{page:this.state.page}）；
}
renderContents（）{
返回this.state.page.page\u content.map（（c，i）=>{
返回（）；
});
}
render（）{
返回(
{this.renderContents（）}
);
}
}

---

如果我注销page.page\u content的结果，则项目将在数组中重新排序，但是表单呈现不会以新的顺序重新呈现内容

您可以尝试强制更新

 renderContents() {
          this.forceUpdate();           
          return this.state.page.page_content.map((c, i) => {
              return (<ContentItem
                key={ i }
                content={ c }
              />);
            });

          }

renderContents（）{
这个.forceUpdate（）；
返回this.state.page.page\u content.map（（c，i）=>{
返回（）；
});
}

不要直接改变这个状态。将其放入新变量，然后将其添加回状态

切勿直接对this.state进行变异，因为之后调用setState（）可能会替换您所做的变异。将this.state视为不可变的

发件人：

相反，您应该尝试：

  updatePositions() {
    const page_contents = [...this.state.page.page_contents]
    // re order page_contents
    this.setState({ page: { page_contents });
  }

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>
    );
  }
}

类表单扩展组件{
//
//..其他初始化代码和逻辑
//
更新位置（）{
//
//重新订购this.state.page.page\u目录
//
this.setState（{page:newValueFromAPI.page}）；
}
render（）{
const{page:{page_content}}=this.state
返回(
{page_content.length>0&&(
page_content.map（c=>）
)}
);
}
}

如果数组顺序可能更改，则不应将数组索引用作键。键应该是永久性的，因为React使用键来标识组件，如果组件接收到以前属于不同组件的键，React会认为它与以前是相同的组件

---

为元素创建永久的唯一键。

这些项目没有设置id。您是否为我们提供了一个可行的示例？由于我们不知道所有内容的结构或用于重新排序的代码。这不是一个好方法

This.setState（{page:This.state.page}）

它意味着您正在修改状态，如果您想将状态更改为先前状态的派生版本，请使用：

This.setState（prevState=>…）

@Titus在回电话时我会怎么做？这是我设置新数组内容的地方吗？是的，您从回调返回的内容将被设置为新状态，您可以这样做：

this.setState（prevState=>（{page:[…prevState.page].sort（…）}））

c={c}

在返回所有内容项的[object object]时不起作用，但是

c>={JSON.stringify（c）}

确实有效。这不是一个很好的破解，但它确实解决了这个问题。JSON.stringify（c）将完成这项工作，但如果值没有更改，那么为什么要重新呈现它呢？应该更改某些内容-如果对象中有一个值不断更改，那么将其保留为键-当组件更改时，它将重新呈现该组件

renderContents() {
    return this.state.page.page_content.map(c => {
      return (<ContentItem
        key={ c }
        content={ c }
      />);
    });
  }

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>
    );
  }
}