React Animation组件不会更新

Question

我正在为anime.js动画库使用React包装器，我正在尝试创建一个接受用户输入的应用程序，然后根据输入设置div的动画

（可视化图片）

它以一个基本的移动方块开始，但在点击Animate按钮后，它会更新为用户输入的内容。

然而，当我点击动画按钮时，div就完全消失了，如果我第二次击中它，整个组件的父母都消失了！但它在控制台中留下了这条错误消息。

我已经完成了测试，并且道具正在传递给AnimationOutput.jsx中的outputDivProps对象并且它们是正确的但是div不会正确更新。

父组件（Animation.jsx）

-Holds AnimationForm.jsx＆amp; AnimationOutput.jsx组件

import React, {Component} from 'react';
import {Segment} from 'semantic-ui-react';

import AnimationForm from './AnimationForm.jsx';
import AnimationOutput from './AnimationOutput.jsx';
import BoxChanger from './BoxChanger.jsx';

export default class Animation extends Component {
  constructor(props) {
    super(props);

    this.state = {
        boxColor: 'white',
        boxShape: 'square',
        boxDiration: 3,
        boxTranslate: '50vw',
        boxEasing: 'linear',
        boxDelay: 0
    };
  }

  updateAni = (boxColor, boxShape, boxDiration, boxTranslate, boxEasing, boxDelay) => {
    console.log('updateAni: ' + boxColor, boxShape, boxDiration, boxTranslate, boxEasing, boxDelay);

    this.setState({
      boxColor: boxColor,
      boxShape: boxShape,
      boxDiration: boxDiration,
      boxTranslate: boxTranslate,
      boxEasing: boxEasing,
      boxDelay: boxDelay
    });
  }

  render() {
    const {boxColor, boxShape, boxDiration, boxTranslate, boxEasing, boxDelay} = this.state;

    return (<Segment inverted>
      <h2>Animation Creator!</h2>

      <AnimationForm aniUpdate={this.updateAni}/>
      <h3>Box Animations!</h3>
      <AnimationOutput boxColor={boxColor} boxShape={boxShape} boxDiration={boxDiration * 1000} boxTranslate={boxTranslate} boxEasing={boxEasing} boxDelay={boxDelay * 1000}/>
      <BoxChanger/>
    </Segment>
  );
  }
}

表单组件（AnimationForm.jsx）

import React, {Component} from 'react';
import {Form, Input, Button, Select, Radio} from 'semantic-ui-react';

export default class AnimationForm extends Component {
  state = {
    boxColorValue: '',
    boxShapeValue: '',
    boxDirationValue: '',
    boxTranslateValue: '',
    boxEasingValue: '',
    boxDelayValue: ''
  };

  handleChange = (e, {name, value}) => this.setState({[name]: value});

  handleSubmit = () => {
    const {boxColorValue, boxShapeValue, boxDirationValue, boxTranslateValue, boxEasingValue, boxDelayValue} = this.state;
    this.props.aniUpdate(boxColorValue, boxShapeValue, boxDirationValue, boxTranslateValue, boxEasingValue, boxDelayValue);
  }

  render() {

    const {boxColorValue, boxDirationValue, boxTranslateValue, boxDelayValue} = this.state;

    const options = [/* Options for dropdown */]

    return (<Form inverted className='box-animation-form' size={'big'}>
      <Form.Group widths='equal'>
        <Form.Field control={Input} name='boxColorValue' value={boxColorValue} label='Color' placeholder='exp. #ffffff or white' onChange={this.handleChange}/>
        <Form.Field control={Input} name='boxDirationValue' value={boxDirationValue} label='Diration' placeholder='exp. 2 or 5 (seconds)' onChange={this.handleChange}/>
        <Form.Field control={Select} name='boxEasingValue' label='Transition Type' value={options.value} options={options} placeholder='Types' onChange={this.handleChange}/>
      </Form.Group>
      <Form.Group inline>
        <label>Shape</label>
        <Form.Field control={Radio} label='Square' checked={this.state.boxShapeValue === 'square'} onClick={() => this.setState({boxShapeValue: 'square'})}/>
        <Form.Field control={Radio} label='Circle' checked={this.state.boxShapeValue === 'circle'} onClick={() => this.setState({boxShapeValue: 'circle'})}/>
        <Form.Field control={Radio} label='Triangle' checked={this.state.boxShapeValue === 'triangle'} onClick={() => this.setState({boxShapeValue: 'triangle'})}/>
      </Form.Group>
      <Form.Group widths='equal'>
        <Form.Field control={Input} name='boxTranslateValue' value={boxTranslateValue} label='Want it to move?' placeholder='exp. 200 or 200px' onChange={this.handleChange}/>
        <Form.Field control={Input} name='boxDelayValue' value={boxDelayValue} label='Delay' placeholder='exp. 1 or 2 (seconds)' onChange={this.handleChange}/>
      </Form.Group>
      <Button inverted color='green' onClick={this.handleSubmit}>Animate!</Button>
    </Form>);
  }
}

动画框组件（AnimationOutput.jsx）

- 我认为问题就在这里！

import React from 'react';
import Anime from 'react-anime';

const AnimationOutput = (props) => {
console.log('AnimationOutput: ' + props.boxColor, props.boxShape, props.boxDiration, props.boxTranslate, props.boxEasing, props.boxDelay);

  let outputDivProps = {
    easing: 'linear',
    loop: true,
    direction: 'alternate',
    duration: props.boxDiration,
    translateX: props.boxTranslate
  };

  let outputDivStyle = {
    width: 100,
    height: 100,
    backgroundColor: props.boxColor
  };

console.log(outputDivProps)

  return (<div className='animation-output-box'>
    <Anime {...outputDivProps}>
      <div style={outputDivStyle}></div>
    </Anime>
  </div>);
}

export default AnimationOutput;