useState 更新对象内部多个变量的一个实例变量

Question

const [emoji, setEmoji] = useState({
like: 0,
love: 0,
laugh: 0,
sad: 0,
wow: 0,
angry: 0,

})


const emojiCount = () => {

  isReacted 
  ? 
  setEmoji(emoji => ({...emoji, laugh: emoji.laugh+1}))
  :
  setEmoji(emoji => ({...emoji, laugh: emoji.laugh-1}))
  setIsReacted(!isReacted)

  }

isReacted 只是一个布尔状态！

我想要实现的是用函数“emojiCount”处理整个状态，我想知道我是否能够将“笑”作为动态变量传递，它可以是“爱”或“喜欢”等..

Answer 1

我想你想做的是动态传递对象键，你可以这样做：

const [emoji, setEmoji] = useState({
  like: 0,
  love: 0,
  laugh: 0,
  sad: 0,
  wow: 0,
  angry: 0,
});


const emojiCount = (emojiIcon) => {
  setEmoji({
    ...emoji,
    [emojiIcon]: emoji[emojiIcon] + 1,
  });
}

因此，如果您调用 emojiCount("laugh") 之类的函数，它将更新笑声键，将笑声值递增 1。

这是一个带有动态按钮的沙盒，用于更新表情符号： https://codesandbox.io/s/adoring-benz-2zeyzh?file=/src/App.js

useState 更新对象内部多个变量的一个实例变量

useState to update an instance variable of many variables inside an object

object

reactjs

use-state