React类组件转使用Hooks的函数组件报错，求错误排查与解决方案

错误原因 #

• 状态类型不匹配：你通过useState声明的counters是数组类型，但handleIncrement中调用setCounters时传入了对象，直接将状态改为对象结构，后续组件中对counters调用数组方法（如filter、map）会直接报错。
• 数组方法使用错误：JS原生数组没有count()方法，你在Navbar的totalCounters计算中调用counters.filter(...).count()属于非法调用，正确写法应该用length属性取过滤后数组的长度。
• hooks更新逻辑和类组件混淆：类组件的setState是合并传入的状态对象，而hooks的状态更新方法是直接替换整个状态值。你原本注释的代码中setCounters({ counters })会把数组包成对象传入，不符合状态定义的结构。
• 变量名冲突：注释的逻辑中存在const counters = counters.filter(...)的写法，会导致内部声明的counters变量覆盖全局状态的counters，触发未定义引用错误。
• 业务逻辑未实现：handleDecrement、handleDelete的核心逻辑被注释，功能无法正常运行。

修正后的完整函数组件代码 #

import React ,{useState} from 'react';
import './App.css';
import Counters from './component/counters';
import Navbar from './component/navbar';

function App(props) {
  const initialState = [
    { id: 1, value: 0 },
    { id: 2, value: 10 },
    { id: 3, value: 20 },
    { id: 4, value: 30 },
  ];
  const [counters, setCounters] = useState(initialState);

  const handleIncrement = (counter) => {
    const newCounters = [...counters];
    const index = newCounters.indexOf(counter);
    newCounters[index] = { ...counter };
    newCounters[index].value++;
    setCounters(newCounters);
  };

  const handleDecrement = (counter) => {
    const newCounters = [...counters];
    const index = newCounters.indexOf(counter);
    newCounters[index] = { ...counter };
    newCounters[index].value--;
    setCounters(newCounters);
  };

  const handleDelete = (counterId) => {
    const newCounters = counters.filter((c) => c.id !== counterId);
    setCounters(newCounters);
  };

  return (
    <div className="container">
      <Navbar totalCounters={counters.reduce((a,c)=>a + c.value,0 )}/>
      <Counters 
          counters={counters}
          onIncrement={handleIncrement}
          onDecrement={handleDecrement}
          onDelete={handleDelete} 
      />
    </div>
  );
}

export default App;

内容的提问来源于stack exchange，提问作者Sanju