Обновления функциональных компонентов без сохранения состояния, в то время как версия с сохранением состояния не

Question

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

Поскольку мой компонент не обновлялся, я сломал его до базовой версии без сохранения состояния, и затем он начал работать. Я пытался сделать идентичные версии компонентов, +/- состояние. Как я уже сказал, работает только версия без состояния, но мне нужен полный компонент, чтобы я мог что-то делать с состоянием. В противном случае я бы использовал его как есть, без состояния.

(Примечание: не уверен, что это 'React-ful', но я использую только реквизиты в примере в полном React.Component, никогда не устанавливая ничего в состояние. Двигаясь дальше ...)

Полная версия компонента - неработающая скрипка

class Posts extends React.Component {
  constructor(props) {
    super(props)
    this.state = {};
    this.posts = props.data;
  }
  render() {
    return this.posts.map((post, index) => {
     return (
        <div className="comment" key={index}>
          <div className="by">{post.by}</div>
          <div className="id">{post.id}</div>
        </div>
      )
    })
  }
 }  

функционал без сохранения состояния - рабочая скрипка

function Posts(props) {
  let posts = props.data;
  return posts.map((post, index) => {
    return (
      <div className="comment" key={index}>
        <div className="by">{post.by}</div>
        <div className="id"> {post.id}</div>
      </div>
    )
 })
}

По какой-то причине полный компонент не рендерится по щелчку, в то время как состояние без состояния. Я думал, что решил проблемы времени, но, возможно, нет? Действительно ли тип компонента приводит к поломке / работе? Почему?

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

Answer 1

class Posts extends React.Component {
  constructor(props) {
    super(props)
    this.state = {};
  }
  render() {
    return this.props.data.map((post, index) => {
     return (
        <div className="comment" key={index}>
          <div className="by">{post.by}</div>
          <div className="id">{post.id}</div>
        </div>
      )
    })
  }
 } 

Прежде всего, попробуйте что-нибудь подобное вместо инициализации постов в конструкторе. В вашем случае это может быть попытка рендеринга до инициализации this.posts

Answer 2

Причина компонента будет повторно визуализировать, когда реквизит или состояние обновления. В вашем штате полный компонент constructor вызывается только один раз. Так что этот пост не обновляется. Это можно исправить двумя способами

Изменить this.posts, когда изменится компонент реквизита

componentWillReceiveProps (nextProps) {
  this.posts = nextProps.posts
}

Или используйте непосредственно props.post в рендере (это лучше)

return this.props.posts.map((post, index) => {...})