akjfal

9/19 본문

하루의 이슈

9/19

akjfal 2019. 10. 30. 22:00
import { useState, useContext } from 'react';
import { useDispatch, StoreContext } from 'redux-react-hook';
export default function useSwitchState() {
const [newLogin, setNewLogin] = useState();
const store = useContext(StoreContext);
const todos = store.getState();
const dispatch = useDispatch();

function addSwitch() {

dispatch({ type: 'LOG_BUTTON', login: newLogin });

setNewSwitch();

}
return {
todos, newLogin, setNewLogin, addSwitch,

};
}

여기서 setNewSwitch()의 함수 안에는 뭐가 들어가야 하는걸까?

TypeError: setNewLogin is not a function

import React from 'react';
import { LogButton } from '../../styles';
export default function Button({
todos, newLogin, setNewLogin, addLogin,
}) {
return (
<LogButton
onClick={() => {
setNewLogin();
addLogin();
}}
value={newLogin}
>
{todos.logstate ? 'Logout' : 'Login'}
</LogButton>
);
}

1번 해결 시도 - logic-hook에 있는 setNewLogin속 인자를 없애보았다.-실패

2번 해결 시도 - switch useState의 초기값을 클릭 다음으로 놓았더니 스위치 버그가 고쳐졌다. - true로 설정하므로서 초기값 false다음 값이 제대로 설정됨

새로운 해결책 -> addSwitch위치를 onclick에서 return 위로 옮겼다.

export default function IosSwitch({ newSwitch, setNewSwitch, addSwitch }) {
addSwitch();
return (
<FormGroup>
<FormControlLabel
control={(
<IOSSwitch
onChange={(e) => {
setNewSwitch(e.target.checked);
}}
value={newSwitch}
/>
)}
/>
</FormGroup>
);
}

3번째 시도 -> interface에 logic hook을 잘못 받고 있어 수정했다.

문제 발생 login logout이 제대로 작동하지 않는다

1번 수정 시도 -> hook폴더의 setNewLogin(!newLogin) 넣기 시도 -> 깊이 오류 -> 무한 루프가 돌거나 그런듯하다

4번째 시도 ->

// addLogin();
return (
<LogButton
onClick={(e) => {
console.log(`newLogin : ${newLogin}`);
setNewLogin(!newLogin);
}}
value={newLogin}
>

newLogin이 계속 바뀐다. addLogin위치를 다시 잡아야할듯하다?

해결 5 ->

logic hook의 부분을

function addLogin() {
console.log(`addLogin : ${newLogin}`);
dispatch({ type: 'LOG_BUTTON', login: !newLogin });
}

setNewLogin을 바꿔버렸더니 해결이 되었다?

e.target.checked는 한번 실행되고 나면 데이터가 사라지는 듯하다

왜 setNewSwitch를 없애버리면 todo마져 실행되지 안는 것일까?

setNewSwitch 에 아무런것도 넣지안더라도 실행시키는 이유 -> 실행시키지 안으면 함수이외의 것이 전혀 실행되지 안는다. why?

setNewSwitch()로만 냅두었더니 상위것들 싱행이 2번만 된다 왜일까 -> 처음 false가 들어간다 -> ()이므로 undefined가 들어간다 -> 같은 행동 반복 -> 변하는것이 없으므로 싱행되지 않는다

결론 setNewSwitch는 return 위의 변수들을 실행시키기 위하여 사용하는것이다. 그렇다면 왜 굳이 setUseState를 사용하면서 이것을 사용할까 왜지?

문제점 router를 하는데 초기화면에 모든 화면이다 보인다 이건문제인데…

-> switch위로 root값을 빼버림

interface에서는 문제가 없는데 pages에서 사용하려고 하니 reducer의 내용을 사용할 수 가 없다.

'하루의 이슈' 카테고리의 다른 글

9/25  (0) 2019.10.30
9/23  (0) 2019.10.30
9/18  (0) 2019.10.30
9/20  (0) 2019.10.30
9/24  (0) 2019.10.30
Comments