reactjs - 将 React 类组件转换为函数组件

Question

我已经使用类组件构建了一个小型应用程序，它也运行良好。
当我将该应用程序转换为函数组件以使用 React 钩子(Hook)时，它给了我错误。
请检查并让我知道哪里出错了。
功能组件

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 counters = [...counters];
    // const index = counters.indexOf(counter);
    // counters[index] = { ...counter };
    // counters[index].value++;
    setCounters({ counter : counter.value +1 });
  };

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

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

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

export default App;

类组件

import './App.css';
import Counters from './component/counters';
import Navbar from './component/navbar';
import React from 'react';


class App  extends React.Component {
  state = {
    counters: [
      { id: 1, value: 0 },
      { id: 2, value: 10 },
      { id: 3, value: 20 },
      { id: 4, value: 30 },
    ],
  };

  handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };

  handleDecrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value--;
    this.setState({ counters });
  };

  handleDelete = (counterId) => {
    const counters = this.state.counters.filter((c) => c.id !== counterId);
    this.setState({ counters });
  };

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

export default App;

如果您想查看完整代码，请告诉我。

Answer 1

问题
问题是您的 counters state 是一个数组，但您正在将状态不变式更改为处理程序中的对象。
解决方案
应用程序 - 使用功能状态更新来映射 counters从前一个状态到下一个状态的数组，使用 id匹配特定的counter你想增加/减少/删除。这个浅层复制了之前的数组。另请注意，正在更新的计数器也被浅复制到新的对象引用中。删除计数器时，您可以正确使用 .filter删除特定元素并返回一个新数组。

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 = (id) => {
    setCounters(counters => counters.map(counter => counter.id === id
     ? {
       ...counter,
       value: counter.value + 1,
     }
     : counter
    ));
  };

  const handleDecrement = (id) => {
    setCounters(counters => counters.map(counter => counter.id === id
     ? {
       ...counter,
       value: counter.value - 1,
     }
     : counter
    ));
  };

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

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

计数器 - 将计数器 ID 传递给处理程序

class Counters extends Component {
  render() {
    const { onIncrement, onDecrement, onDelete, counters } = this.props;
    return (
      <div>
        {counters.map((counter) => (
          <Counter
            key={counter.id}
            counter={counter}
            onIncrement={() => {
              onIncrement(counter.id);
            }}
            onDecrement={() => {
              onDecrement(counter.id);
            }}
            onDelete={() => {
              onDelete(counter.id);
            }}
          />
        ))}
      </div>
    );
  }
}

专柜-自 id在上面的回调范围内关闭，只需调用事件处理程序

class Counter extends Component {
  ...

  render() {
    return (
      <div>
        <span className={this.getBadge()}>{this.getCount()}</span>

        <button
          className="btn btn-secondary m-2"
          onClick={this.props.onIncrement}
        >
          Increment
        </button>

        <button
          className="btn btn-secondary m-2"
          onClick={this.props.onDecrement}
        >
          Decrement
        </button>

        <button className="btn btn-danger m-2" onClick={this.props.onDelete}>
          Delete
        </button>
      </div>
    );
  }
}