javascript - React Hooks 实现计数器

Question

我正在尝试在组件中使用 React Hook (useState 和 useEffect)来显示投票计数。用户单击向上/向下按钮后，“投票”状态应递增或递减，然后应用程序调用 API 来修补数据库中的“投票”计数。原始投票计数来自父组件传递的 props。但由于某种原因，投票的初始状态始终为 0——即使当我 console.log Prop 时它显示了正确的投票数？

PATCH 请求似乎工作正常，但我认为带有钩子(Hook)的东西是错误的。预先感谢您提供的任何帮助!

export default function Votes(props) {
    const { item, voteCount, itemType } = props
    const [votes, setVotes] = useState(voteCount || 0)

    useEffect(() => {
        if (itemType == 'question') {
                questionApiService.updateQuestionFields({
                    questionId: item.id, 
                    questionFields : { votes: `${votes}` }
                })
            } else if (itemType === 'answer') {
                console.log('answer')
                // questionApiService.updateAnswerFields({
                //     answerId: item.id,
                //     answerFields: { votes: votes }
                //})
            }
        }, [votes])

    const handleClick = e => {
        e.currentTarget.id === "increment"
            ? setVotes(prevCount => prevCount + 1)
            : setVotes(prevCount => prevCount - 1)
    }

    return (
        <div className="QuestionPage__votes-count">
            <button id="increment" onClick={handleClick}>
                <FontAwesomeIcon icon={faCaretUp} size="2x" />
            </button>
            {votes}
            <button id="decrement" onClick={handleClick}>
                <FontAwesomeIcon icon={faCaretDown} size="2x" />
            </button>
        </div>
    )
}

Answer 1

您需要将 itemType 添加到 useEffect 的依赖项中，因为您不能期望该 prop 在第一次渲染时可用，或者在整个过程中保持静态组件的生命周期。在您当前的示例中，引用的 itemType 将始终引用该函数第一次运行时的值。

正如其他人提到的，从 props 设置状态初始值是一个禁忌。您可以通过使用单独的 Effect 在组件收到其 props 后设置状态来解决此问题:

...
const [votes, setVotes] = useState(0);
...

useEffect(() => {
  setVotes(voteCount);
}, [voteCount]);