React useState() 布尔切换组件添加而不是替换值

Question

我创建了一个模拟社交媒体网站，用户可以在其中评论和“喜欢”帖子，因此我想要一个竖起大拇指的按钮，可以在“喜欢”和“不喜欢”之间切换。问题是，当我单击时，状态值（不喜欢）被替换的 setState 值（喜欢）加入。我哪里错了？

import React, { useState } from 'react';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';

const ThumbUpButton = {
  backgroundColor: 'rgb(115, 250, 179)',
  border: 'none',
  borderRadius: '5px',
}

const ThumbStyle = {
  backgroundColor: 'red',
  border: 'none',
  padding: '5px',
  borderRadius: '5px',
  margin: '1rem'
}

const Liker = () => {
  const [thumb, setThumbUp] = useState(false);

  return (
    <>
      <button style={{border: 'none', backgroundColor: 'transparent'}} onClick={() => setThumbUp(!thumb)}>
        <ThumbUpIcon style={ThumbStyle} />
        {thumb && <ThumbUpIcon style={ThumbUpButton} />}
      </button>
    </>
  );
}

export default Liker;

Answer 1

首先你应该通过 callbacksetThumbUp ((thumb) => !thumb) 更新你的状态，其次你在这一行 <ThumbUpIcon style={ThumbStyle} /> 中遇到了问题，这个 JSX 渲染了按钮是否被点击，所以你必须把条件：

import React, { useState } from 'react';
import ThumbUpIcon from '@material-ui/icons/ThumbUp';

const ThumbUpButton = {
  backgroundColor: 'rgb(115, 250, 179)',
  border: 'none',
  borderRadius: '5px',
};

const ThumbStyle = {
  backgroundColor: 'red',
  border: 'none',
  padding: '5px',
  borderRadius: '5px',
  margin: '1rem',
};

const Liker = () => {
  const [thumb, setThumbUp] = useState(false);
  const style = thumb ? ThumbUpButton : ThumbStyle;

  return (
    <>
      <button
        style={{ border: 'none', backgroundColor: 'transparent' }}
        onClick={() => setThumbUp((thumb) => !thumb)}
      >
        <ThumbUpIcon style={style} />
      </button>
    </>
  );
};

export default Liker;

Answer 2

改变这可能有效使用功能设置状态

onClick={() => 设置大拇指(s=>!s)}

Answer 3

如果我理解你的问题，你是在问为什么有时会同时呈现赞同和不赞同。这是因为你无条件地表示赞成，有条件地表示不喜欢。

您应该渲染其中之一。由于它是相同的组件，而您只是交换样式，因此有条件地应用一种或另一种样式。

此外，在切换布尔状态值时通常使用功能状态更新，因为下一个状态必然取决于前一个状态，即 thumb => !thumb。这避免了回调中的陈旧状态封闭。

<button
  style={{
    border: 'none',
    backgroundColor: 'transparent'
  }}
  onClick={() => setThumbUp(thumb => !thumb)}
>
  <ThumbUpIcon style={thumb ? ThumbStyle : ThumbUpButton} />
</button>

Answer 4

请直接设置值

onClick={() => setThumbUp(!thumb)}

React useState() 布尔切换组件添加而不是替换值

React useState() boolean toggle component adding instead of replacing values

javascript

reactjs

use-state