React Hooks 实现计数器

Question

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

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

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 的依赖项中，因为您不能期望该道具在第一次渲染时可用，或者在整个组件生命周期中保持静态。在您当前的示例中，引用的 itemType 将始终在此函数第一次运行时引用其值。

正如其他人所提到的，从 props 设置状态初始值是禁止的。一旦你的组件收到它的道具，你可以通过使用单独的效果来设置状态来解决这个问题：

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

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

Answer 2

您可以像@tobiasfreid 所说的那样使用useState() 来更改计数器状态，或者如果您想创建一个自定义挂钩来实现相同的功能。

function ChangeCounter() {
  const [counter,onChangeValue] = useCounter(0);
  return (
    <div className="Form">
      <button type="button" onClick={onChangeValue(counter + 1)}> Increase Counter </button>
    </div>
  );
}
function useCounter(initialValue){
  const [value, setValue] = useState(initialValue || 0);

  const onChange= (data) => {
    setValue(data)
  };

  return [value, onChange]; 
}

通过这种方式，您可以创建自定义挂钩。

Answer 3

import React from 'react';
import ReactDOM from 'react-dom';

function useCounter(initialCount = 0) {
  const [count, setCount] = React.useState(initialCount);
  const increment = React.useCallback(() => setCount(c => c + 1), []);
  const decrement = React.useCallback(() => setCount(c => c - 1), []);
  return { count, increment, decrement };
}

const delay = duration => new Promise(resolve => setTimeout(resolve, duration));

function App() {
  const { count: votes, increment, decrement } = useCounter(0);
  React.useEffect(() => {
    (async () => {
      console.log('Call your API');
      await delay(2000);
      console.log('API Called with votes :', votes);
    })();
  }, [votes]);

  return (
    <div>
      <h1>Votes {votes}</h1>
      <button onClick={decrement}>Decrement</button>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 4

tobiasfried 下面的回答真的帮助了我。我在这里发布完整的解决方案代码，以防将来可以帮助其他人。当然，如果有人有改进此代码的建议，我很乐意听到。

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

    useEffect(() => {
        setVotes(item.votes);
    }, [item.votes])

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

    return (
        <div className="QuestionPage__votes-count">
            <button 
                onClick={() => setVotes(prevCount => prevCount + 1)}>
                <FontAwesomeIcon icon={faCaretUp} size="2x" />
            </button>
            {votes}
            <button 
                onClick={() => setVotes(prevCount => prevCount - 1)}>
                <FontAwesomeIcon icon={faCaretDown} size="2x" />
            </button>
        </div>
    )
}