如何解决如何在 useReducer 开关案例中正确测试 if-else 条件?
我正在学习 React,目前正在审查 useReducer。我正在尝试创建一个在输入错误条目时重置的小键盘。当 'add-entry'
情况为 [ ...state,action.value ]
时,此代码有效,但当我引入 if 语句时,它似乎失败了。我不明白为什么条件评估为假。当我测试按钮处理程序中的值时,它们是等效的。关于问题可能是什么的任何想法?
import React,{ useReducer } from 'react';
import ReactDOM from 'react-dom';
function Keypad() {
const code = [ "1","2","3","4","5","6" ];
let access = '';
const reducer = ( state,action ) => {
switch (action.type) {
case 'add-entry':
if ( state === code.slice(0,state.length) ) {
return [ ...state,action.value ]
} else {
return []
}
default:
return state
}
};
const [state,dispatch] = useReducer(reducer,[]);
function buttonHandler( event ) {
console.log('state',state)
console.log('code',code.slice(0,state.length))
dispatch({ type:'add-entry',value: event.target.value })
}
return (
<div>
<div>Your code is: <strong>{ code }</strong></div>
<div>Current entry: <strong>{ state }</strong></div>
<br/>
<button onClick={buttonHandler} value="1">1</button>
<button onClick={buttonHandler} value="2">2</button>
<button onClick={buttonHandler} value="3">3</button>
<button onClick={buttonHandler} value="4">4</button>
<button onClick={buttonHandler} value="5">5</button>
<button onClick={buttonHandler} value="6">6</button>
<br/>
<div>Access: <strong>{ access }</strong></div>
</div>
);
}
ReactDOM.render(
<Keypad/>,document.querySelector('#root')
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。