反应由组件接收但不在JSX中更新的道具

时间:2017-07-27 19:12:57

标签: javascript reactjs typescript

所以这是一个有趣的。这是代码的片段。这是一个纯函数组件,我传递一个对象,我们将通过props调用someData。

BASICINFO BEFORE RETURN在第一次使用默认的someData对象呈现组件时被记录。 'BASICINFO AFTER RETURN然后再次使用默认的someData对象进行记录。当父组件的状态更新时,BASICINFO BEFORE RETURN日志显示更新的数据,但是我没有得到日志BASICINFO AFTER RETURN显示更新的道具,正如我所期望的那样。就好像它不知道道具更新。有人知道是什么原因引起的吗?

export function MyComponent({someData}: MyComponentProps) {
  console.log('BASICINFO BEFORE RETURN', someData.basicInfo);
  return (
    <Flex>
      {console.log('BASICINFO AFTER RETURN', someData.basicInfo)}
      <Box>
        <p>
          {someData.basicInfo.personalSummary}
        </p>
      </Box>
  )
}

2 个答案:

答案 0 :(得分:0)

组件是否可能不会重新渲染,因为所显示的数据实际上并不相同?即:如果basicInfo.personalSummary发生变化,组件是否会重新渲染?

如果显示的数据正在改变而且没有重新渲染,你确定状态没有被改变吗?

答案 1 :(得分:0)

是的,事实证明我正在改变状态。我正在处理嵌套了几层深的对象。结束扁平状态,只是保存我真正需要的东西。应该首先做到这一点。