Reactjs 如何将此React类组件转换为函数组件

我正在尝试将类组件转换为函数组件，但没有成功。这是我要转换的类组件：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  state = {users: []}

  componentDidMount() {
    fetch('/users')
      .then(res => res.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return (
      <div className="App">
        <h1>Users</h1>
        <ul>
        {this.state.users.map(user =>
          <li key={user.id}>{user.username}</li>
        )}
        </ul>
      </div>
    );
  }
}

export default App;

尝试将类组件转换为函数组件失败

import React, {setState } from 'react';
import './App.css';

function App () {
  const state = {users: []};

  const componentDidMount = () => {
    fetch('/users')
      .then(res => res.json())
      .then(users => setState({ users }));
  }

    return (
      <div className="App">
        <h1>Users</h1>
        <ul>
        {state.users.map(user =>
          <li key={user.id}>{user.username}</li>
        )}
        </ul>
      </div>
    );

}

export default App;

如果您可以使用useffect并将空数组作为第二个参数传入，那么请帮助我，这样在装入组件后只执行一次，这与componentDidMount在使用类时的操作类似

要管理状态，请使用useState，它返回一个有状态值和一个更新该值的函数：

import React, { useState, useEffect } from 'react';
import './App.css';

function App () {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('/users')
      .then(res => res.json())
      .then(users => setUsers(users));
  }, []);

  return (
    <div className="App">
      <h1>Users</h1>
      <ul>
        {state.users.map(user =>
          <li key={user.id}>{user.username}</li>
        )}
      </ul>
    </div>
  );
}

export default App;

您应该使用useEffect钩子，而不是使用功能组件中不可用的componentDidMount生命周期钩子。在useEffect挂钩上，您将空数组设置为，这样它将仅在首次装入组件时运行

此外，您应该使用useState钩子来维护组件状态

const [users, setUsers] = useState([]);

useEffect(() => {
fetch('/users')
      .then(res => res.json())
      .then(users => setUsers(users));
}, []);

return (
  <div className="App">
    <h1>Users</h1>
    <ul>
    {users.map(user =>
      <li key={user.id}>{user.username}</li>
    )}
    </ul>
  </div>
);

const [users, setUsers] = useState([]);

useEffect(() => {
fetch('/users')
      .then(res => res.json())
      .then(users => setUsers(users));
}, []);

return (
  <div className="App">
    <h1>Users</h1>
    <ul>
    {users.map(user =>
      <li key={user.id}>{user.username}</li>
    )}
    </ul>
  </div>
);

---

在React 16.8之前，功能组件仅用作无状态/呈现组件，并且仅在属性发生更改时才应重新呈现

在React 16.8之后，引入了钩子的新概念，它允许开发人员在功能组件中也有一个状态。虽然这个新概念和旧的类组件方法在方法上有一些不同，但是从类组件和状态组件的转换非常简单。您只需要使用useState钩子来创建一个状态，对于组件中的所有副作用，比如Fetch API调用，使用useEffect钩子

组件中的第一个更改是创建/使用状态作为

let [users, setUsers] = React.useState([]) 

通过此更改，您将能够通过直接使用users变量而不是使用this.state.users，pretty neet访问您的用户状态。另外，现在要更新状态，您将使用新函数setUsers，它将为您更新状态，然后重新呈现组件。您可以在中阅读有关此挂钩的更多信息

组件中的第二个更改是将fetchapi调用从组件did mount移动到useffect钩子

注意第二个参数是一个空数组，这只是告诉React这个useEffect钩子只需要在这个组件第一次呈现时运行，或者你可以说这个组件什么时候挂载。React在每次渲染后运行所有useEffect挂钩，因此这一点非常重要。您可以在中阅读更多关于此的信息

现在，您的组件看起来更像：

const [users, setUsers] = useState([]);

useEffect(() => {
fetch('/users')
      .then(res => res.json())
      .then(users => setUsers(users));
}, []);

return (
  <div className="App">
    <h1>Users</h1>
    <ul>
    {users.map(user =>
      <li key={user.id}>{user.username}</li>
    )}
    </ul>
  </div>
);