ReactJS：当 parents 状态 object 改变时，Child 不会 re-rendered

Question

我一直在尝试通过更改 parent class 中的状态 object 来 re-render 轮播中的联系人列表。卡片第一次渲染得很好 - 但当我尝试添加新联系人并更新状态时 object，child 不会再次渲染。

我已确认状态 object 已正确更新（记录在 parent 组件的 useEffect 挂钩中）。

我正在使用下面的@trendyol-js/react-carousel组件。

          const [contacts, setContacts] = React.useState([...contactArrayFromDB]);

          <Carousel
            className="carosusel"
            {...settings}
            rightArrow={
              <ArrowForwardIcon
                className="rightArrow"
                sx={{ color: styles.color.green }}
              />
            }
            leftArrow={
              <ArrowBackIcon
                className="backArrow"
                sx={{ color: styles.color.green }}
              />
            }
          >
            {**contacts.map**((item, index) => (
              <span>
                {console.log("rendering card .." + index)}
                <ContactCard
                  key={item.id}
                  item={item}
                  styles={styles}
                  isEditContacts={true}
                />
              </span>
            ))}
          </Carousel>

当我更新状态时，日志“rendering card ..”显示在控制台上，这意味着每次状态更新时地图函数都会正确执行。

我遵循了 SO 上我能找到的所有解决方案：

通过 child 的键属性内的整个状态 object。没用！我什至通过 item.id 传递了一个随机数，我现在传递给关键参数。
在 Child 中使用了状态 object。没有区别。
在 parent 处更改状态 object 时，我确保克隆它而不是直接更改数组元素。还是不行。

我找不到任何解决办法。 React 专家，请建议我如何解决这个问题。

Answer 1

经过大量研究，最终发现 @trendyol-js/react-carousel 有一个 dynamic 标志，必须将其设置为 TRUE 才能向其中添加新项目。官方文档没有讲。也许这会对遇到此反应组件的类似问题的人有所帮助。

<Carousel
  dynamic={true} ...>
   ... items here
</Carousel>

ReactJS：当 parents 状态 object 改变时，Child 不会 re-rendered

ReactJS : Child wont re-rendered when the parents state object changes

javascript

reactjs

react-component

react-hooks

react-functional-component