javascript - TransitionMotion を React Motion で動作させることができません

Question

this.props.data反応モーション TransitionMotion とスプリングを使用してマウント/アンマウント アニメーションで React で一連のデータ ( ) をレンダリングしようとしています。このデータは、検索/フィルター機能を介して別のコンポーネントから更新されています。API リファレンスに従うように最善を尽くしましたが、コンソール デバッグで次の警告が表示されます。Failed prop type: Invalid prop `styles` supplied to `TransitionMotion`.

この警告にもかかわらず、データは引き続きレンダリングされます。マウント/アンマウントのトランジションはなく、最大 10 個のアイテムをレンダリングしているだけでも、の内容を変更すると、タブ全体が地獄のように遅れますthis.props.data。

私のコードで何が起こっているのか誰か知っていますか? デバッグに関するヘルプは大歓迎です。

import React, { Component } from "react";

import classNames from "classnames";
import { TransitionMotion, spring } from "react-motion";

import QtlPanel from "../QtlPanel.jsx";
import GenePanel from "../GenePanel.jsx";
import Loader from "./Loader.jsx";

class PanelArea extends Component {
  getDefaultStyles = () => {
    return this.props.data.map( item => ({
      key: item.id.toString(),
      data: item,
      style: {
        height: 0,
        opacity: 1
      }
    }) );
  }

  getStyles = () => {
    return this.props.data.map( item => ({
      key: item.id.toString(),
      data: item,
      style: {
        height: spring(80),
        opacity: spring(1)
      }
    }) );
  }

  willEnter = () => ({
    height: spring(0),
    opacity: spring(1)
  })

  willLeave = () => ({
    height: spring(0),
    opacity: spring(0)
  })

  render() {
    const classes = classNames(
      "panel-area", {
        "loading": this.props.loading
      }
    );

    const transitionProps = {
      defaultStyles: this.getDefaultStyles(),
      styles: this.getStyles(),
      willEnter: this.willEnter,
      willLeave: this.willLeave
    };

    return (
      <div className={classes}>
        <Loader isLoading={ this.props.loading } />
        <TransitionMotion { ...transitionProps }>
          { styles => (
            <div>
              { styles.map(({ key, style, data }) => {
                const panelProps = {
                  key: key,
                  data: data,
                  style: style
                };

                if (this.props.activeDataset === "qtl") {
                  return <QtlPanel { ...panelProps } />;
                } else {
                  return <GenePanel { ...panelProps } />;
                }
              }) }
            </div>
          ) }
        </TransitionMotion>
      </div>
    );
  }
}

export default PanelArea;