Javascript 使用usereducer钩子的文本框出现未定义错误

我正在学习使用减速机挂钩。在下面的代码中，我在执行时遇到了一个未定义错误的问题。有两个文本框。如果我键入文本，它必须显示结果。但是在这里，在提交表格之后。我收到两个文本框的未定义的消息。让我知道我犯了什么错误

function ReducerFour() {
const initialState = {
    users: [
      { name: 'alan', age: 30 },
      { name: 'messi', age: 30 }
    ]
  };


const ADD_USER = 'ADD_USER';

const appReducer = (state, action) => {
  switch (action.type) {
    case ADD_USER:
      return {
        users: [
          ...state.users,
          { 
            payload: action.payload
          }
        ]
      };
  }
};


  const [state, dispatch] = useReducer(
    appReducer,
    initialState
  );


  const addUser = () => {
    const name = document.getElementById('form-name-input')
      .value;
    const age = document.getElementById('form-age-input')
      .value;

    const newUser = { name, age };

    dispatch({
      type: ADD_USER,
      payload: newUser
    });
  };

  return (
    <div className="app">
      {state.users.map(user => (
        <div>{`${user.name}   ${user.age}`}</div>
      ))}
      <div className="form">
        <div className="form-name">
          <label>name:</label>
          <input id="form-name-input" />
        </div>
        <div className="form-age">
          <label>age:</label>
          <input id="form-age-input" />
        </div>
        <button onClick={() => addUser()}>Add user</button>
      </div>
    </div>
  );
}

export default ReducerFour

function ReducerFour（）{
常量初始状态={
用户：[
{姓名：'alan'，年龄：30}，
{姓名：'梅西'，年龄：30}
]
};
const ADD_USER='ADD_USER'；
常量赋值器=（状态、操作）=>{
开关（动作类型）{
案例添加用户：
返回{
用户：[
…国家用户，
{ 
有效载荷：action.payload
}
]
};
}
};
const[state，dispatch]=useReducer(
评论员，
初始状态
);
const addUser=（）=>{
const name=document.getElementById（'form-name-input'）
价值
const age=document.getElementById（'form-age-input'）
价值
const newUser={name，age}；
派遣({
类型：添加用户，
有效载荷：newUser
});
};
返回(
{state.users.map（user=>(
{${user.name}${user.age}}
))}
姓名：
年龄：
addUser（）}>添加用户
);
}
导出默认减速机四次

这是修复方法

const appReducer = (state, action) => {
    switch (action.type) {
      case ADD_USER:
        return {
          users: [
            ...state.users,
              action.payload
          ]
        };
        default:
          return state;
    }
  };

---

工作谢谢你能消除我的疑虑吗？理解这个概念会有帮助。1.Initialstate名称和年龄在括号内指定，然后说明为什么从开关盒添加用户中删除大括号。2.为什么删除负载？action.payload包含新的用户对象。必须将其添加到state.users数组中。state.users=>[{name:'alan'，age:30}，{name:'mesi'，age:30}]action.payload=>{name:'Nilesh'，age:30}