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

Question

我是 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 递增时，它起作用了。为什么上面的代码不起作用？

Answer 1

更新状态时，您删除了属性 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
      }

Answer 2

当您尝试更新状态挂钩时，您应该使用 { ...prevState, count: value }。 if 块还有另一个错误。当条件为 true 时，该块将始终着墨并导致 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;

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

Counter with react useState hook is not working right

reactjs

react-hooks

use-state