Reactjs 如何在没有解构器的情况下增加对象中的值

我试图在不解构这些值的情况下增加其中一个值

我怎么做

import React, { useState } from 'react'    
    function App()
    {
    const [values,setValues]=useState({
      counter:0,
      counter1:0
    })
      return(
        <div>
          <h1>{values.counter}</h1>
          <button onClick={()=>setValues(prev=>({...prev,[values.counter]:prev.counter+1}))}>add</button>
        </div>
      )
    }
    export default App

import React，{useState}来自“React”
函数App（）
{
const[values，setValues]=useState({
柜台:0,，
比分是1:0
})
返回(
{values.counter}
setValues（prev=>（{…prev[values.counter]：prev.counter+1}））}>add
)
}
导出默认应用程序

您的代码中有一个错误：

setValues(prev=> ({...prev, [values.counter]: prev.counter+1 }))}

应该是：

setValues(prev=> ({...prev, counter: prev.counter+1 }))}

否则，您将获得以下状态：

0: 1,
counter: 0,
counter1: 0

你会继续添加像：1:2，2:3

除此之外，我至少可以看到三种更安全的方法：

方法1:

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

用法：

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

方法2:

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

用法：

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

方法3（增强方法2）：

用法：

onClick={() => setValues(prev => ({ counter: prev.counter + 1 }))}

---

您的代码中有一个bug：

setValues(prev=> ({...prev, [values.counter]: prev.counter+1 }))}

应该是：

setValues(prev=> ({...prev, counter: prev.counter+1 }))}

否则，您将获得以下状态：

0: 1,
counter: 0,
counter1: 0

你会继续添加像：1:2，2:3

除此之外，我至少可以看到三种更安全的方法：

方法1:

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

用法：

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

方法2:

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

用法：

const [values, dispatch] = useReducer(
  (state, { type, field }) => {
    switch(type) {
      case 'INCREMENT': return { ...state, [field]: (state[field] || 0) + 1 }
      default: throw new Error('Unhandled case in values reducer')
    }
  },
  { counter: 0, counter1: 0 }
)

onClick={() => dispatch({ type: 'INCREMENT', field: 'counter' })}

const [values, setValues] = useReducer(
  (oldState, newState) => ({ ...oldState, ...newState }),
  { counter: 0, counter1: 0 }
)

onClick={() => setValues({ counter: values.counter + 1 })}

方法3（增强方法2）：

用法：

onClick={() => setValues(prev => ({ counter: prev.counter + 1 }))}

---

如果这是一个可能的选择，您也可以简单地将您的州一分为二：

function App()
{
  const [counter, setCounter] = useState(0);
  const [counter2, setCounter2] = useState(0);

  return(
    <div>
      <h1>{values.counter}</h1>
      <button onClick={() => setCounter(prev => counter + 1)}>add</button>
    </div>
  )
}
export default App

函数应用程序（）
{
const[counter，setCounter]=useState（0）；
const[counter2，setCounter2]=useState（0）；
返回(
{values.counter}
setCounter（prev=>counter+1）}>add
)
}
导出默认应用程序

---

如果您可以选择，您也可以简单地将您的州一分为二：

function App()
{
  const [counter, setCounter] = useState(0);
  const [counter2, setCounter2] = useState(0);

  return(
    <div>
      <h1>{values.counter}</h1>
      <button onClick={() => setCounter(prev => counter + 1)}>add</button>
    </div>
  )
}
export default App

函数应用程序（）
{
const[counter，setCounter]=useState（0）；
const[counter2，setCounter2]=useState（0）；
返回(
{values.counter}
setCounter（prev=>counter+1）}>add
)
}
导出默认应用程序

---

您所说的“不解构”是指不将您的状态拆分为两个不同的值？我将是最简单的解决方案。上面的代码不起作用，我正试图用静态值增加它。计数器，我怎么做？你说的“不解构”是指不将状态拆分为两个不同的值？我将是最简单的解决方案。上面的代码不起作用，我正试图用静态值来增加它。计数器，我该怎么做？