反应：“警告：使用 useReducer 时收到 `children` 属性的 NaN”

Question

我正在学习如何在 React 中使用Reducer，当我尝试使状态计数和数字相互交互时收到此错误消息：“警告：children 属性收到 NaN”

import React, { useReducer } from 'react'

const initialState = {
    count: 0,
    number: 2,
}

const countReducer = (state, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + state.number }

        case 'DECREMENT':
            return { count: state.count - state.number }

        default:
            return state
    }
}

const Reducer = () => {

    const [state, dispatch] = useReducer(countReducer, initialState)


    return (
        <div>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
            <h1>{state.count}</h1>
        </div>
    )
}

export default Reducer

我第一次递增时，它工作正常，它会递增或递减 2。但是，我第二次点击时，我得到了那个错误。

有人能告诉我这是为什么吗？

Answer 1

当您从 reducer 返回时，您并没有替换所有状态值，因此第二次 state.number 未定义。然后，您尝试使用 undefined 进行数学运算，这会导致 NaN 错误。

改变这个：

return { count: state.count + state.number }

到这里：

return { ...state, count: state.count + state.number }

对递减的情况做同样的事情。

这称为解构，会将您之前的状态复制到新对象中，然后您可以覆盖任何需要更改的内容。

以下是工作示例：

const {useState, useReducer} = React;

const initialState = {
  count: 0,
  number: 2,
}

const countReducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + state.number }
    case 'DECREMENT':
      return { ...state, count: state.count - state.number }
    default:
      return state
  }
}

const Example = () => {
  const [state, dispatch] = useReducer(countReducer, initialState)
  
  return (
    <div>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
      <h1>{state.count}</h1>
    </div>
  )
}

ReactDOM.render(<Example />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>