为了账号安全,请及时绑定邮箱和手机立即绑定

useReducer 中是否需要使用展开运算符?

useReducer 中是否需要使用展开运算符?

弑天下 2023-08-24 10:31:07
编辑:检查布莱恩的答案后,我发现即使在第二个示例中,删除...state也会导致与第一个示例相同的行为,所以这个问题问是错误的。我不确定是什么导致了错误的行为,并对造成的任何不便表示歉意。布莱恩的回答很好地解释了用途。比较以下 2 个代码片段,它们通过使用 一次更新 2 个状态来完成相同的操作initialState,除了一个使用useState,另一个使用useReducer:useStateconst {useState} = React;const initialState = {  name: 'John',  age: 20};const Example = () => {  const [state, setState] = useState(initialState);  const handleName = () => {    setState({...state, name: 'Tom'});  }    const handleAge = () => {    setState({...state, age: 30});  }  return (    <div>      <p>{state.name}</p>      <p>{state.age}</p>      <button onClick={handleName}>        Click to change name      </button>      <button onClick={handleAge}>        Click to change age       </button>    </div>  );};ReactDOM.render(  <Example />,  document.getElementById("react"));<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="react"></div>如果在第一个示例中删除...state,它将状态设置为单个键/值对,因此不再起作用。我原以为第二个例子中会发生同样的事情,但事实并非如此。第二个示例在删除扩展运算符后效果很好。我对第二个例子有3个问题:扩展运算符有什么用?为什么删除扩展运算符后它仍然有效?如果没有扩展运算符也能正常工作,这是否意味着第二个示例中不需要扩展运算符?
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 115 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信