调用了 render() 但 DOM 未更新答案

【问题标题】：render() called but DOM not updated调用了 render() 但 DOM 未更新
【发布时间】：2020-11-20 01:32:22
【问题描述】：

我有一个 react 组件，它返回来自连接的 redux 存储的项目列表。

存储区由 thunk 异步更新，这会导致组件中调用 render() 函数。根据 console.log 诊断，我可以看到渲染返回包含新数据的更新结构，但 DOM 未更新。

列表有一个关键项目。我也试过没有密钥和随机密钥，但行为是一样的。

如何进一步诊断此问题？

这是组件的精简代码：

class BigDeviceNavigationComponent extends PureComponent<BigDeviceNavigationComponentProps> {

  renderBigNaviReservationItem(currentReservation: Reservation, items: number) {
    console.log('renderBigNaviReservationItem')

    const itemkey: string = 'bignavigation' + items.toString() + '_' + currentReservation.reservationCode;
    console.log(itemkey)

    const retval =  (
      <a key={itemkey}
        className={classNames('item w-100' )}
        href={'#'}
        onClick={() => {}        }
      >{itemkey}
      </a>
    );
    console.log(retval)
    return retval
  }

  render() {
    console.log('bigdevice render')
    console.log(this.props)
    const { reservation, items, bookingLinks } = this.props;

    const reservationList = reservation.list.map((currentReservation: Reservation) => {
      return this.renderBigNaviReservationItem(currentReservation, items);
    })
    console.log(reservationList)
    const retval = (
      <Container fluid={true} style={{paddingBottom:'0.25rem'}}>
        <Row>
          <Col md={6} className="py-0">

            {reservation.list.length > 0 && (
              <OwlCarousel
                className="vertical-center owl-theme px-3 reservation-selection"
                items={items}
                loop={false}
                dots={false}
                margin={10}
                nav={true}
                navText={[
                  '<i class="ion-chevron-left icon-big" />',
                  '<i class="ion-chevron-right icon-big" />',
                ]}
              >
                {reservationList}
              </OwlCarousel>
            )}
          </Col>
        </Row>
      </Container>
    );
    console.log(retval)
    debugger;
    return retval
  }
}

const mapStateToProps = (state: ApplicationReduxState): ApplicationReduxState => ({
  reservation: state.reservation,
});

const mapDispatchToProps = (dispatch: Dispatch): ReduxDispatch => ({
  dispatch,
});

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps,
  ),
)(BigDeviceNavigationComponent);

包括我的 console.log 输出，我可以看到渲染返回了附加元素，但它没有找到进入 dom 的方式。

调试器中的初始渲染包含 reservationList 中的 8 项：

redux 更新触发的第二次渲染包含 9 项但不更新 dom

【问题讨论】：

请包含您目前拥有的代码 - stackoverflow.com/help/minimal-reproducible-example
你试过chrome.google.com/webstore/detail/react-developer-tools/…你可以使用它来验证你组件中的props。
当它绊倒调试器时；第一次 {reservationList} 包含 8 个项目，这些项目被渲染到 dom 中。当它在 redux 更新后第二次遇到调试器时，{reservationList} 包含 9 个项目，但 DOM 没有改变。
它似乎与 OwlCarousel 有某种关联。如果我用

标签： reactjs react-redux redux-thunk

【解决方案1】：

之前有人遇到过这个问题，提出了解决方案： https://hashnode.com/post/react-js-render-method-called-with-state-update-but-component-view-did-not-update-cjq7ohku100dm57s1yk6qvp56

添加改变 OwlCarousel 的键会触发刷新。

【讨论】：