为什么我在 console.log 的第一个对象上得到 [Getter/Setter]？

Question

i'm tried to create theme for my app, and this is a sample of my theme:

//themeContext.js
export const buildTheme = (userColors = {}, userFonts = {}, userTheme = {}) => {
  const mergedColors = {
    ...defaultColors,
    ...userColors,
  };
  // merge fonts
  const mergedFonts = {
    ...defaultFonts,
    ...userFonts,
  };

  return {
    colors: mergedColors,
    fonts: mergedFonts,

    label: {
      marginTop: 10,
      fontSize: 14,
      color: mergedColors.textPrimary,
      ...(userTheme.label)
    },
    // error
    error: {
      fontSize: 12,
      color: mergedColors.error,
      ...(userTheme.error),
    },

    //another style
  }
}
export const ThemeContext = createContext({
  theme:buildTheme()
});

and on DynamicForm.js i use the themeContext like this:

export default class DynamicForm extends Component{
  constructor(props) {
    super(props);
    this.state = {
      theme:this.props.theme?this.props.theme:buildTheme(),
      responses: {},
    };
  }

  render(){
    return(
      <ThemeContext.Provider value={this.state}>
        <TextField
          //handle prop
        />
      </ThemeContext.Provider>
    )
  }
}

i have a consumer file, and about to use the theme with this code:

export default class TextField extends PureComponent {
  static contextType = ThemeContext
  render(){
    const {theme} = this.context
    console.log(theme)
    return(
      //render component
    )
  }
}

and the result of console.log(theme) :

as you see on label i get [Getter/Setter] but not in every value of key, why this is happened?

Answer 1

This is because marginTop , fontSize , and color are not just simple properties but they are JavaScript Accessors , which have getters and setters - basically, they are functions to get and set the value.

If you want to force it to call the getters to get the values, you could do this instead:

console.log(Object.assign({}, theme));

A possible alternative is:

console.log(JSON.stringify(theme));