Question

我试图创建一个“喜欢/不喜欢”按钮，为此，我使用了一个初始化为liked的React Hook名称false。

此钩子用于修改前面的like按钮和后端的like事件。问题在于setState是一个异步函数，我无法拥有liked的良好状态来执行我的操作。

我已经尝试使用useEffect，但是将liked初始化为false，这是在加载时执行liked === false时的动作。我不想。

这是我的代码

import React from 'react'
import styled from 'styled-components'
import HeartIcon from 'client/components/icons/Heart'
import IconButton from 'client/components/IconButton'
const Heart = styled(HeartIcon)`
  stroke: ${p => p.theme.primary};
  stroke-width: 2;
  fill: transparent;
  transition: fill 300ms;
  display: block;
  width: 100%;
  height: auto;
  &[aria-checked='true'] {
    fill: ${p => p.theme.primary};
  }
`
export default function LikeButton(props) {
    const [liked, setLiked] = React.useState(false)
    function onLikeChange() {
      setLiked(prevLiked => !prevLiked)
      if (liked === true) {
        // creation d'un event like
        console.log('like')
      } else {
        console.log('unlike')
        // destroy l'event du like existant
      }
    }
    return (
      <IconButton onClick={onLikeChange} {...props}>
        <Heart aria-checked={liked} />
      </IconButton>
    )
}

当然，我可以切换动作以执行所需的操作，但我更希望了解自己在做什么，因为我是新来的人;）

这是怎么回事？谢谢

Answer 1

我认为您要在此处完成的工作需要两个useEffect挂钩。一种用于在初始加载时从后端获取值，另一种用于在更改时更新值。为此，您应该使用两个useEffect挂钩。这些之间的区别非常简单。设置初始值的钩子用于组件在渲染后需要执行某些操作，而状态变化时设置喜欢的值的钩子仅在liked发生变化时调用。因此，您将数组作为可选的第二个参数传递给useEffect。

const [liked, setLiked] = useState()

useEffect(() => {
  console.log('get the initial value of liked from backend');
  setLiked(initialValue)
}

useEffect(() => {
  console.log('Do something after liked has changed', liked);
  if (liked === true) {
    console.log('like')
  } else {
    console.log('unlike')
  }
}, [liked]);

function onLikeChange() {
  setLiked(prevLiked => !prevLiked)
}

由于异步，无法在函数内使用useState

1 个答案: