Question

所以这是一个有趣的。这是代码的片段。这是一个纯函数组件，我传递一个对象，我们将通过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>
  )
}

Answer 1

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

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

Answer 2

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

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

2 个答案: