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

我从API和async获取数据，并且我认为解决了相关的时间问题，但是我仍然存在渲染不更新的问题

由于我的组件不会更新，我将其分解为基本的无状态版本，然后它开始工作。我试着制作相同版本的组件，+/-state。正如我所说，只有无状态版本可以工作，但我需要完整的组件才能工作，这样我才能处理状态。否则我就按原样使用，无状态

（旁注：不确定这是否为“React ful”，但我仅在完整React.Component的示例中使用道具，从不将任何内容设置为state。继续…）

完整版本组件-

类发布扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={}；
this.posts=props.data；
}
render（）{
返回此.posts.map（（post，index）=>{
返回(
{post.by}
{post.id}
)
})
}
}  

无国籍功能性-

功能帖子（道具）{
让posts=props.data；
返回posts.map（（post，index）=>{
返回(
{post.by}
{post.id}
)
})
}

由于某些原因，完整组件不会在单击时重新呈现，而无状态组件会重新呈现。我以为我解决了时间问题，但也许没有？部件类型是否确实导致部件损坏/工作？为什么?

---

我试着做了唯一的不同，顺便说一句，小提琴的结构是

帖子

，但小提琴还是很忙。希望在显示我的问题时比在这里显示代码更有效。

因为组件将在道具或状态更新时重新呈现。在您的状态下，完整组件

构造函数

只调用一次。所以这个帖子没有更新。你可以用两种方法解决这个问题

更改

此。当道具组件将更改时发布

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

或者在渲染中直接使用
props.post
（这样更好）

原因组件将在道具或状态更新时重新渲染。在您的状态下，完整组件
构造函数
只调用一次。所以这个帖子没有更新。你可以用两种方法解决这个问题

更改
此。当道具组件将更改时发布

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

或者在渲染中直接使用
props.post
（这样更好）

类发布扩展了React.Component{
建造师（道具）{
超级（道具）
this.state={}；
}
render（）{
返回此.props.data.map（（post，index）=>{
返回(
{post.by}
{post.id}
)
})
}
} 

首先，尝试这样的方法，而不是在构造函数中初始化帖子。在您的情况下，可能是我在初始化此.posts.Component之前尝试进行渲染{
建造师（道具）{
超级（道具）
this.state={}；
}
render（）{
返回此.props.data.map（（post，index）=>{
返回(
{post.by}
{post.id}
)
})
}
} 

首先，尝试这样的方法，而不是在构造函数中初始化帖子。在你的情况下，我可能会在初始化之前尝试渲染。posts
你为什么要重新绑定道具？只需在渲染函数中使用
this.props.posts.map（…）
，您就可以实际使用当前的道具，而不是在调用构造函数的时候缓存的道具。Blarg！我总是担心我的问题会变成这样愚蠢的事情。我做了
这个.props.data.map
，它成功了。最初我重新标记它只是为了保持名称为
posts
，而不是更改模板（最后我不需要做任何更改）。我认为这是从上一次迭代中遗留下来的，并且不知道/理解is正在锁定值。谢谢你看这个！你为什么要重新绑定道具？只需在渲染函数中使用
this.props.posts.map（…）
，您就可以实际使用当前的道具，而不是在调用构造函数的时候缓存的道具。Blarg！我总是担心我的问题会变成这样愚蠢的事情。我做了
这个.props.data.map
，它成功了。最初我重新标记它只是为了保持名称为
posts
，而不是更改模板（最后我不需要做任何更改）。我认为这是从上一次迭代中遗留下来的，并且不知道/理解is正在锁定值。谢谢你看这个！你是对的。我更新了它，现在可以用了。始终感谢您这样的调试工作！你是对的。我更新了它，现在可以用了。始终感谢您这样的调试工作！虽然这里的两个答案都解决了我的问题，但我将其标记为正确的b/c您使用提供了两个解决方案，并且使用
组件将获得道具
，这是我没有想到的（因此教了我一些东西）+1对于答案的这一部分（尽管我不打算在这里使用；）谢谢@motezart当这里的两个答案都解决了我的问题时，我将其标记为正确的b/c您使用提供两个解决方案，并且使用
组件将接收道具
，这是我没有想到的（因此教了我一些东西）+1对于答案的这一部分（尽管我不打算在这里使用它；）谢谢@MoteZart
componentWillReceiveProps (nextProps) {
  this.posts = nextProps.posts
}

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

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