在 React 中将 class 组件转换为功能组件

Question

我正在学习 React 挂钩，因此为了做到这一点，我尝试将 class 组件转换为功能组件，但我仍然遇到一些错误。

这是写成 class:

的原始工作组件

import React, { Component } from 'react';
import NavBar from './components/navbar';
import Counters from './components/counters';

class App extends Component {
  state = {
    counters: [
      { id: 0, value: 5 },
      { id: 1, value: 1 },
      { id: 2, value: 2 },
    ],
  };

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

  handleReset = () => {
    const counters = this.state.counters.map((c) => {
      c.value = 0;
      return c;
    });
    this.setState({ counters });
  };

  handleIncrement = (counter) => {
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  };
  render() {
    return (
      <React.Fragment>
        <NavBar
          totalCounters={this.state.counters.filter((c) => c.value > 0).length}
        />
        <main className='container'>
          <Counters
            counters={this.state.counters}
            onReset={this.handleReset}
            onDelete={this.handleDelete}
            onIncrement={this.handleIncrement}
          />
        </main>
      </React.Fragment>
    );
  }
}

export default App;

这是使用钩子的转换版本。

 import React, { useState } from 'react';
    import NavBar from './components/navbar';
    import Counters from './components/counters';
    
    const App = () => {
      const [counters, setCounters] = useState([
        { id: 0, value: 5 },
        { id: 1, value: 1 },
        { id: 2, value: 2 },
      ]);
    
      const handleDelete = (counterId) => {
        const counterss = counters.filter((c) => c.id !== counterId);
        setCounters({ counterss });
      };
    
      const handleReset = () => {
        const counterss = counters.map((c) => {
          c.value = 0;
          return c;
        });
        setCounters({ counterss });
      };
    
      const handleIncrement = (counter) => {
        const counterss = [...counters];
        const index = counterss.indexOf(counter);
        counterss[index] = { ...counter };
        counterss[index].value++;
        setCounters({ counterss });
      };
    
      return (
        <React.Fragment>
          <NavBar totalCounters={counters.filter((c) => c.value > 0).length} />
          <main className='container'>
            <Counters
              counters={counters}
              onReset={handleReset}
              onDelete={handleDelete}
              onIncrement={handleIncrement}
            />
          </main>
        </React.Fragment>
      );
    };
    
    export default App;

它的大部分工作正常，但它不断抛出一个错误，指出 filter 不是一个函数。这是消息：

TypeError: counters.filter is not a function

Answer 1

setCounters({ counterss })

应该是

setCounters(counterss)

Answer 2

罪魁祸首似乎是您更新状态的方式，就像这样：

setCounters({ counterss });

这实际上会将您的 counters 状态设置为具有属性 counterss 的对象，因此您的状态将包含以下内容：

{ counterss: [/* rest of the array */] }

抛出的确切错误是指您试图在对象而不是数组上调用 .filter 这一事实。要解决此问题，您应该像这样简单地更新您的状态：

setCounters(counterss);

Answer 3

它会抛出错误，因为您将新状态设置为对象 setCounters({ counterss });。但是你想要一个数组：setCounters(counterss);。这样它不会在第二次调用 setCounters 时抛出错误。

在 React 中将 class 组件转换为功能组件

Convert class component to functional component in React

javascript

reactjs

react-hooks

use-state