React PLX Element 产生“超出最大更新深度”错误

Question

我像这样安装了 react-plx：npm install --save react-plx

这是模块的链接：https://www.npmjs.com/package/react-plx

我按照上页的例子，在“render”下定义了这些变量：

render() {
    const exampleParallaxData = [
      {
        start: 100,
        duration: 400,
        easing: "ease",
        properties: [
          {
            startValue: 0,
            endValue: 250,
            property: "translateY"
          }
        ]
      }
    ];

    const styles = {
      width: 200,
      height: 100,
      lineHeight: "100px",
      textAlign: "center",
      borderRadius: 20,
      backgroundColor: "#34ba9c",
      color: "#fff",
      position: "absolute"
    };


    return (
        <div className="callToAction">
          <Plx parallaxData={exampleParallaxData} style={styles}>
            Hello
            <button className="draw">I am a button</button>
          </Plx>
        </div>
    );
      }
    }

有时它可以工作......但其他人我得到这个错误：

dev-vendors.js:2057 Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at invariant (dev-vendors.js:2057)
    at requestWork (dev-vendors.js:46621)
    at scheduleWorkImpl (dev-vendors.js:46520)
    at scheduleWork (dev-vendors.js:46477)
    at Object.enqueueSetState (dev-vendors.js:42000)
    at Plx.Component.setState (dev-vendors.js:8044)
    at eval (Plx.js:704)

我有什么办法可以避免这个问题，或者这是否意味着我不应该使用这个包？

Answer 1

这是工作示例

import React from 'react';
import Plx from 'react-plx';
class TestJS extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const exampleParallaxData = [
            {
                start: 100,
                duration: 400,
                easing: "ease",
                properties: [
                    {
                        startValue: 0,
                        endValue: 250,
                        property: "translateY"
                    }
                ]
            }
        ];

        const styles = {
            width: 200,
            height: 100,
            lineHeight: "100px",
            textAlign: "center",
            borderRadius: 20,
            backgroundColor: "#34ba9c",
            color: "#fff",
            position: "absolute"
        };

        return(
            <div className="callToAction">
                <Plx parallaxData={exampleParallaxData} style={styles}>
                    Hello
                    <button className="draw">I am a button</button>
                </Plx>
            </div>
        );
    }
}

export default TestJS;