TypeError：无法设置未定义的属性“ header”

Question

我在一个网站上工作，在该网站上可以选择颜色以具有聊天框的自定义主题。每当我从颜色选择器中选择一种颜色时，都会遇到此错误。例如，如果我想在每次选择以下颜色时更改聊天框标题的颜色，则会发生错误：

如果需要显示更多代码，我只是共享部分代码，我将在以后进行更新。

ThemeChanger.js

class ThemeChanger extends Component {
  constructor(props) {
    super(props);
    const {
      header,
      pane,
      body,
      composer,
      textarea,
      button,
      messageBackgroundImage,
    } = this.props.customThemeValue;
    const showMessageBackgroundImage = messageBackgroundImage !== '';
    this.state = {
      header,
      pane,
      body,
      composer,
      textarea,
      button,
      backgroundImage: '',
      messageBackgroundImage,
      showMessageBackgroundImage,
    };

    this.initialValue = {
      header,
      pane,
      body,
      composer,
      textarea,
      button,
      backgroundImage: '',
      messageBackgroundImage,
      showMessageBackgroundImage,
    };
  }

  handleChangeMessageBackgroundImage = name => e => {
    const { value } = e.target;
    this.setState({ [name]: value });
  };

  // get the selected custom colour
  handleChangeComplete = (name, color) => {
    if (color) {
      this.setState({ currTheme: 'custom' });
      if (!color.startsWith('#')) {
        color = '#' + color;
      }
      // Send these Settings to Server
      let state = this.state;

      if (name === 'header') {
        state.header = color;
        this.customTheme.header = state.header.substring(1);
}
      this.setState(state);
      document.body.style.setProperty('background-color',this.state.body);
    }
  };

ColorPickerComponent / index.js

import React from 'react';
import styled from 'styled-components';
import ColorPicker from 'material-ui-color-picker';
import PropTypes from 'prop-types';
import './ColorPicker.css';

const ColorBox = styled.span`
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 3px;
  border: 1px solid #0000006e;
  cursor: pointer;
  margin-right: 0.625rem;
  margin-bottom: -0.5rem;
  background-color: ${props => props.backgroundColor};
`;

const ColorPickerContainer = styled.div`
  margin-left: 2.8rem;
  margin-top: -1.8rem;
  width: 6rem;
`;

const ColorPickerComponent = props => {
  const {
    backgroundColor,
    handleClickColorBox,
    id,
    handleChangeColor,
    component,
  } = props;
  return (
    <div>
      <ColorBox
        backgroundColor={backgroundColor}
        onClick={() => handleClickColorBox(id)}
      />
      <ColorPickerContainer>
        <ColorPicker
          name="color"
          id={'colorPicker' + id}
          defaultValue={backgroundColor}
          onChange={color => handleChangeColor(component, color)}
        />
      </ColorPickerContainer>
    </div>
  );
};

我希望我能解释一下，如有需要，我可以分享更多详细信息。在此先感谢您的帮助。

Answer 1

在这里将道具分解为物体时

 const {
  header,
  pane,
  body,
  composer,
  textarea,
  button,
  messageBackgroundImage,
} = this.props.customThemeValue;

将标头保存在称为标头的常量中，然后使用该const在状态对象中创建一个header键。

在这里，您访问不存在的类属性customTheme：

if (name === 'header') { 
   state.header = color; 
   this.customTheme.header = state.header.substring(1);
}

您是否要在此处更新标题？如果是，那么您应该这样做：

this.setState({header: color});

据说，无论您在哪里使用标题，都可以对其进行更新。

customTheme应该在这里是什么？