Question

我从API异步获取数据，并认为解决了相关的时序问题here，但仍然存在渲染未更新的问题。

由于我的组件无法更新，因此将其分解为基本的无状态版本，然后它开始工作。我试图制作相同版本的组件，+ /-状态。如我所说，只有无状态版本才能工作，但是我需要完整的组件才能工作，以便可以对状态进行处理。否则我会原样使用它，无状态。

（旁注：不确定这是否是“ React-ful”，但在完整的React.Component的示例中，我仅使用props，从未设置任何要声明的内容。继续...）

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

无状态功能-working fiddle

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

道具或状态更新时，原因组件将重新渲染。在您的状态下，完整组件constructor仅调用一次。所以this.post没有更新。您可以通过两种方式解决该问题

在道具组件更改时更改this.posts

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

或直接在渲染中使用props.post（效果更好）

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

Answer 2

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

之前进行渲染

无状态功能组件更新，而有状态版本不更新

2 个答案: