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

Question

我正在尝试使用 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>
    );
  }
}

如果我注销 page.page_content 的结果，项目将在数组中重新排序，但是表单渲染不会以新顺序重新渲染内容

Answer 1

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

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

Answer 2

你可以尝试强制更新

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

          }

Answer 3

不要直接改变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 });
  }

Answer 4

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