Object.values requires that input pa... - 인프런

IconButton 만들기에서 Object.values requires that input parameter not be null or undefined. 라는 오류가

나타나는데 왜 그런걸까요 ? 도움 부탁드립니다.

IconButton.propTypes = {

    icon: PropTypes.oneOf(Object.values(icons)).isRequired,

    onPress: PropTypes.func,

};

위 코드를 빼니까 정상적으로 동작하네요 .. icons를 undefined으로 인식하는데 무엇이 잘못된걸까요?

* 파일구조

theme.js

export const theme = {
    background: '#111111',
    itemBackground : '#333333',
    main: '#778bdd',
    text: '#eeeeee',
    done: '#666666'
};

Input.js

import React from 'react';
import styled from 'styled-components/native';
import {Dimensions, useWindowDimensions} from 'react-native';
import PropTypes from 'prop-types';

const StyledInput = styled.TextInput.attrs(({theme}) => ({
    placeholderTextColor: theme.main,
}))`
    width: ${({width}) => width - 40}px;
    height: 60px;
    margin: 3px 0;
    padding: 15px 20px;
    border-radius: 10px;
    font-size: 25px;
    background-color: ${({theme}) => theme.itemBackground}
    color: ${({theme}) => theme.text};
`;

const Input = ({placeholder, value, onChangeText, onSubmitEditing}) => {
    // const width = Dimensions.get('window').width;
    const width = useWindowDimensions().width;
    return <StyledInput width={width} placeholder={placeholder} maxLength={500}
    autoCorrect={false}
    autoCapitalize="none"
    returnKeyType="done"
    keyboardAppearance="dark"
    onChangeText={onChangeText}
    onSubmitEditing={onSubmitEditing}
    value={value}></StyledInput>
}

Input.propTypes = {
    placeholder: PropTypes.string,
    value: PropTypes.string.isRequired,
    onChangeText: PropTypes.func.isRequired,
    onSubmitEditing: PropTypes.func.isRequired
}

export default Input;

App.js

import { StatusBar } from 'react-native'
import React, {useState} from 'react';
import styled, {ThemeProvider} from 'styled-components/native';
import {theme} from './theme';
import Input from './components/Input'
import IconButton from './components/IconButton'
import { icons } from './icons';


/** Styled Component */
const Container = styled.SafeAreaView`
  flex: 1;
  background-color: ${({theme}) => theme.background};
  align-items: center;
  justify-content: flex-start;
`;

const Title = styled.Text`
  font-size: 40px;
  font-weight: 600;
  color: ${({theme})=> theme.main};
  width: 100%;
  align-items: flex-end;
  padding: 0 20px;
`;

export default function App() {

  const addTask = () => {
    alert(newTask);
    setNewTask('');
  }

  const [newTask, setNewTask] = useState('');
  return (
    <ThemeProvider theme={theme}>
    <Container>
      <Title>TODO List</Title>
    <Input placeholder="+ Add a Task" value={newTask}
    onChangeText = {text => setNewTask(text)}
    onSubmitEditing={addTask}></Input>
      <StatusBar
      barStyle= "light-content"
      backgroundColor={theme.background}
      />
      <IconButton icon={icons.check} onPress={()=>alert('check')}></IconButton>
      {/* <iconButton icon={icons.uncheck} onPress={()=>alert('uncheck')}></iconButton>
      <iconButton icon={icons.edit} onPress={()=>alert('edit')}></iconButton>
      <iconButton icon={icons.delete} onPress={()=>alert('delete')}></iconButton> */}
    </Container>
    </ThemeProvider>
  );
}

icon.js

import Check from '../assets/icons/check.png';
import Delete from '../assets/icons/delete.png';
import Uncheck from '../assets/icons/uncheck.png';
import Edit from '../assets/icons/edit.png';

export const icons = {
    check: Check,
    uncheck: Uncheck,
    edit: Edit,
    delete: Delete,
};

iconButton.js

import React from 'react';
import {TouchableOpacity, View} from 'react-native';
import styled from 'styled-components/native';
import PropTypes from 'prop-types';
import icons from '../icons'

const Icon = styled.Image`
    width: 30px;
    height: 30px;
    margin: 10px;
    tint-color: ${({theme})=> theme.text};
`;

const IconButton = ({icon, onPress}) => {
    return (
    <TouchableOpacity
    onPress={onPress}>
        <View>
            <Icon source={icon}></Icon>
        </View>
    </TouchableOpacity>
    );
};

IconButton.propTypes = {
    icon: PropTypes.oneOf(Object.values(icons)).isRequired,
    onPress: PropTypes.func,
};

export default IconButton;

인프런 커뮤니티 질문&답변

Object.values requires that input parameter not be null or undefined.