Redux 질문입니다

[최정민]

redux를 정말 그대로 따라 했는데

TypeError: undefined is not an object (evaluating 'props.state[0]')

 

이라는 에러가 뜨네요 2일동안 해결법을 찾아봤는데도 모르겠네요 원인이 뭘까요? ㅜ

[codingapple]

어떤 부분이 undefined라는 소리같은데 의심가는 곳을 콘솔창에 출력해보며 찾아봅시다 

[최정민]

세계최고로 쉬운 Redux 2 : reducer/dispatch로 데이터 수정하는 법

이 강의 그대로 따라 했는데 state를 인식을 못하는 것 같습니다 그냥

1강 Redux때는 잘 되는데 Reducer로 옮기면 계속 undefined가 뜹니다

[codingapple]

코드를 올려주시면 됩니다 

[최정민]

-index.js-

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import "./App.css";
import reportWebVitals from './reportWebVitals';
import ResponsiveDrawer from './ResponsiveDrawer';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

let cookielist = [
{
id : 0,
title : "RainBow",
price : "2000원",
img: 'https://user-images.githubusercontent.com/37207343/150829529-f856aeb2-6351-4180-a95d-286cd3999393.jpg',
},

{
id : 1,
title : "Eyes",
price : "2100원",
img: 'https://user-images.githubusercontent.com/37207343/150830806-002cc212-80fc-441a-9284-e2adbfd6e873.jpg',
},

{
id : 2,
title : "Decalcomanie",
price : "2200원",
img : 'https://user-images.githubusercontent.com/37207343/150830826-ec555f1e-c0e1-40d9-a3ec-a2574be611ce.jpg',
},

{
id : 3,
title : "AlocDaloc",
price : "2300원",
img : 'https://user-images.githubusercontent.com/37207343/150830836-d2451c16-a4d3-4974-b922-731e81588fc7.jpg',
},

{
id : 4,
title : "MnM 초콜릿 쿠키",
price : "2400원",
img : 'https://user-images.githubusercontent.com/37207343/150830842-441a72b4-6d91-4a87-b51b-82d86eb9ccb6.jpg',
},

{
id : 5,
title : "Toy",
price : "2500원",
img : 'https://user-images.githubusercontent.com/37207343/150830848-f290e97b-3258-4799-bf09-05c1d826dc65.jpg',
},
 
{
id : 6,
title : "Heart",
price : "2600원",
img : 'https://user-images.githubusercontent.com/37207343/150830855-d9f0d711-a70d-4a1d-a4f5-8183801f0db4.jpg',
},
 
{
id : 7,
title : "Circle",
price : "2700원",
img : 'https://user-images.githubusercontent.com/37207343/150830863-f3c80743-ce0c-4da2-ac67-9991f95beade.jpg',
},

{
id : 8,
title : "Line",
price : "2800원",
img : 'https://user-images.githubusercontent.com/37207343/150830868-15077a7f-77b8-4a8c-9a14-4b8e8e4ba9d4.jpg',
}

] ;

function reducer(state = cookielist, action){

return state
}

let store = createStore(reducer);

ReactDOM.render(

<React.StrictMode>
<BrowserRouter>
<Provider store={store}>
<ResponsiveDrawer />
</Provider>
</BrowserRouter>
</React.StrictMode>,

document.getElementById('root')
);

-ResponsiveDrawer.js 일부-

{history.push('/detail/0')} } width='280' src={(props.cookielist[0].img)}/>
{history.push('/detail/1')} } width='280' src={(props.cookielist[1].img)}/>
{history.push('/detail/2')} } width='280' src={(props.cookielist[2].img)}/>
<p className="IName">{props.cookielist[0].title} <Chip size='small' variant="outlined" label="new" color="secondary" /></p>
<p className="IName">{props.cookielist[1].title}</p>
<p className="IName">{props.cookielist[2].title}</p>

 

function UseRedux(state){
return {
cookielist : state
}
}

export default connect(UseRedux)(Album);

입니다 에러는

TypeError: undefined is not an object (evaluating 'props.cookielist[0]')

이렇게 뜹니다

[codingapple]

컴포넌트에 props 파라미터 입력했는지 확인하고

props.cookielist[0] 안에 img 라는 항목이 있는지 콘솔창에 출력도 해봅시다 

[글쓴이]

글