Javascript React color ChromePicker不能正常工作

我正在使用，并且在使用之后，我已经实现了ChromePicker

它应该如何工作：

打开镀铬机 使用色调栏和/或大正方形选择颜色 关闭ChromePicker后，我想更新道具上对象的颜色值 到目前为止，它是这样工作的：

单击其按钮时，它将打开 选择颜色不正常。当我点击色调并从侧面拖动小圆圈时，颜色正在改变，我知道这是因为有一个this.state.color，但圆圈保持不变。此外，我希望在大广场上加载现在的调色板，但它没有这样做。如果我在正方形中单击以选择颜色，它的工作原理与色调栏类似。即使值发生变化，圆仍保持在同一位置。 该值已保存，但也无法正常工作：每次更改颜色时，都会多次调用该请求。我希望它只有在我选择了一种颜色并单击它之外的某个地方退出ChromePicker后才会改变，我想onChangeComplete可以做到这一点。 以下是它的屏幕截图：

为什么镀铬机如此糟糕？有办法解决吗？另外，我想在ChromePicker关闭后才在公司上保存新颜色，似乎onChangeComplete并不是由此触发的

代码如下：

 import React from 'react';
    import { Button, Icon } from 'semantic-ui-react';
    import { ChromePicker } from 'react-color';
    import { connect } from 'react-redux';
    import { Creators } from '../../actions';
    
    
    class Banner extends React.PureComponent {
      constructor(props) {
        super(props);
        this.state = {
          displayColorPicker: false,
        };
      }
    
      handleClick = () => {
        this.setState({ displayColorPicker: true });
      };
    
      handleClose = () => {
        this.setState({ displayColorPicker: false });
      };
    
      handleChangeComplete = colors => {
        const {
          name,
          color,
        } = this.state;
        this.setState({ color: colors.hex });
        const { updateCompany } = this.props; // company is the entity from props that is updated
                                              // it contains 2 values, its name and its color
        updateCompany(this.props.company._id, {
          name,
          color,
        });
      };
    
    
    
      render() {
        this.props.color.color.color = this.state.color;
        const popover = { // this is not essential, it's some styling for the picker
          position: 'absolute',
          zIndex: '2',
        };
        const cover = { // same as for popover
          position: 'fixed',
          top: '0px',
          right: '0px',
          bottom: '0px',
          left: '0px',
        };
        const {company } = this.props; // gets the company from props
        return (
          <div className="banner-container settings-banner">   
     
      //the below div with its style is updating in real time when the color is changed 
                  <div style={{ backgroundColor: this.state.color }}>              
                    <div>
                      <Button
                        className="select-color-btn"
                        onClick={this.handleClick}>
                        Select a color
                      </Button>
                      {this.state.displayColorPicker ? (
                        <div style={popover}>
                          <div
                            style={cover}
                            onClick={this.handleClose}
                            onKeyDown={this.handleClick}
                            role="button"
                            tabIndex="0"
                            aria-label="Save"
                          />
                          <ChromePicker
                            color={this.props.company.color}
                            onChangeComplete={this.handleChangeComplete}
                          />
                        </div>
                      ) : null}
                    </div>
                  </div>
            
          </div>
        );
      }
    }
    
    const mapStateToProps = state => ({
      company: state.companies.selectedCompany,
    });
    
    const mapDispatchToProps = {
      updateCompany: Creators.updateCompanyRequest,
    };
    
    export default connect(mapStateToProps, mapDispatchToProps)(Banner);