Реагировать на неупорядочивание массива компонентов при рендере

Question

Я пытаюсь отобразить список компонентов в порядке с реакцией, компонент обновляет этот массив элементов, но не переупорядочивает их.

Псевдокод;

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

Не мутируйте this.state напрямую. Переведите его в новую переменную, а затем добавьте обратно в состояние.

Никогда не изменяйте this.state напрямую, так как последующий вызов setState () может заменить сделанную вами мутацию. Относитесь к этому состоянию как к неизменному.

от: 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 2

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

Answer 3

вы можете попытаться принудительно обновить

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

          }