带有反应 useState 钩子的计数器无法正常工作答案

【问题标题】：Counter with react useState hook is not working right带有反应 useState 钩子的计数器无法正常工作
【发布时间】：2020-11-19 20:59:00
【问题描述】：

我是 React 新手。我用 useState 钩子做了一个计数器；应用显示 + 和 - 按钮和一个文本，最初为 0。

import React, { useState } from 'react';

function App() {

  const [state, setState] = useState({
    count: 0,
    bool: false,
    incValue: 1
  })

  if (state.count >= 10 || state.count <= -10) {
    setState({incValue: 10})
  }

  const incrementCount = () => {
    setState(prevState => {
      return {
        count: prevState.count + state.incValue
      }
    })
  }

  const decrementCount = () => {
    setState(prevState => {
      return {
        count: prevState.count - state.incValue
      }
    })
  }

  return (
    <>
      <button onClick={decrementCount}>-</button>
      <span>{state.count}</span>
      <button onClick={incrementCount}>+</button>
    </>
  );
}

export default App;

但是有一个错误，我找不到原因。当我不初始化 incValue: 1 状态并以 1 而不是 state.incValue 递增时，它可以工作。为什么上面的代码不起作用？

【问题讨论】：

第二次点击时触发错误？
@HamzaKhattabi，是的

标签： reactjs react-hooks use-state

【解决方案1】：

当您尝试更新状态挂钩时，您应该使用{ ...prevState, count: value }。 if 块还有另一个错误。当条件为 true 时，该块将始终 inkoved 并导致 Too many re-renders 错误。要修复它，请使用 useEffect 钩子。所以你的代码将是：

import React, { useState, useEffect } from "react";

function App() {
  const [state, setState] = useState({
    count: 0,
    bool: false,
    incValue: 1
  });

  useEffect(() => {
    if (state.count >= 10 || state.count <= -10) {
      setState({ ...state, incValue: 10 });
    }
  }, [state.count]);

  const incrementCount = () => {
    setState((prevState) => {
      return {
        ...state,
        count: prevState.count + state.incValue
      };
    });
  };

  const decrementCount = () => {
    setState((prevState) => {
      return {
        ...state,
        count: prevState.count - state.incValue
      };
    });
  };

  return (
    <>
      <button onClick={decrementCount}>-</button>
      <span>{state.count}</span>
      <button onClick={incrementCount}>+</button>
    </>
  );
}

export default App;

【讨论】：

【解决方案2】：

当您更新状态时，您删除了属性 bool 和 inc 值。实际上，您创建了一个只有计数值的新对象。要保持整个状态并只更新一个字段，您必须像这样复制它：

递减：

 setState(prevState => {
      return {
        ...prevState, //Copy the current state and update only the count
        count: prevState.count - state.incValue
      }

增量也是一样的：

 setState(prevState => {
      return {
        ...prevState, //Copy the current state and update only the count
        count: prevState.count + state.incValue
      }

【讨论】：