[英]Redux action returns undefined
我有以下减速机:
export const showResult = (state = [], action) => {
switch (action.type) {
case 'GET_NUMBER':
return [
...state,
action.n
]
case 'CLEAR_NUMBER':
return [
...state
].pop()
case 'RESET_RESULT':
return []
default:
return state
}
}
单击“deleteNumber”时会遇到“CLEAR_NUMBER”情况:
import React, { Component } from 'react'
import Display from './Container'
import Operator from './Container'
import { selectOperator } from './../util'
class Calculator extends Component {
constructor(props) {
super(props)
this.state = {
val1: '',
val2: ''
}
}
displayNumber = e => {
const { getNumber, resetResult, getOperator } = this.props
getNumber(parseInt(e.target.dataset.n))
}
getOperator = e => {
const { getOperator, n, resetResult, resetOperator } = this.props
resetOperator()
getOperator(e.target.dataset.sign)
if(this.state.val1 == "") {
this.setState({
val1: n
})
resetResult()
}
}
getSum = val => {
val.reduce((acc, val) => acc + val)
}
deleteNumber = () => {
const { clearNumber } = this.props
clearNumber()
}
getTotal = () => {
const { n, operator, resetResult } = this.props,
{ val1, val2 } = this.state,
value1 = this.getSum(val1),
value2 = val2 != "" ? this.getSum(val2) : null;
let operatorVal = operator[0]
this.setState({ val2: n })
resetResult()
selectOperator(operatorVal, value1, value2)
}
render() {
const { n, operator, getNumber } = this.props
return (
<div>
<Display val={n == "" ? null : n} />
<Operator val={operator} />
{/* NUMBERS */}
<p data-n="1" onClick={this.displayNumber}>1</p>
<p data-n="2" onClick={this.displayNumber}>2</p>
<p data-n="3" onClick={this.displayNumber}>3</p>
{/* OPERATORS */}
<p data-sign="+" onClick={this.getOperator}>+</p>
<p data-sign="-" onClick={this.getOperator}>-</p>
<p data-sign="/" onClick={this.getOperator}>/</p>
<p data-sign="*" onClick={this.getOperator}>*</p>
<p onClick={this.getTotal}>equal</p>
<p onClick={this.deleteNumber}>clear</p>
</div>
)
}
}
export default Calculator
它基本上从数组中删除了最后一个元素(就像你在计算器上有一个清晰的函数)。
我得到的错误是数组中还有一个项目:
你做的很好,但如果一个数组是空的怎么办? pop
将返回undefined
因此错误。
case 'CLEAR_NUMBER':
return [
...state
].pop()
编辑:
case 'CLEAR_NUMBER': {
if(state.length > 0) {
return [
...state
].pop()
}
return state;
}
pop
返回已删除的元素,而不是修改后的数组。
你需要这样做
const newState = [...state];
newState.pop();
return newState;
或者,使用return state.slice(0, -1)
。
您应该像这样使用以避免此类错误:
case 'CLEAR_NUMBER':
if ([...state].length > 1) {
return [...state].pop()
}
return [] // or return null, but not undefined ie. no explicit return
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.