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}我没有更改，因此它不会重新呈现组件-如果您想重新呈现组件，请确保-密钥应该更改。

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

反应不重新排列渲染组件的数组

4 个答案: