Question

我正在尝试将类组件转换为功能组件，但未成功。这是我要转换的类组件：

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;

请帮助我

Answer 1

您应该使用componentDidMount钩子，而不是使用useEffect生命周期钩子（功能组件中不可用）。在useEffect挂钩上，将一个空数组设置为dependency array，以便仅在首次安装组件时运行它。

此外，您应该使用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>
);

Answer 2

使用useEffect并将空数组作为第二个参数传递，这样，它在组件安装后仅执行一次，这与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;

Answer 3

在React 16.8功能组件之前，它们仅用作无状态/表示组件，并且仅当属性发生更改时才应该重新渲染。

在React 16.8之后，引入了新的Hooks概念，它允许开发人员在功能组件内部也具有状态。尽管此新概念与旧的类组件方法在方法上有所不同，但是从类组件和状态组件的转换非常简单。您只需使用<div class="hover_img"> <a href="#">Show Image<span><img src="https://picsum.photos/536/354" alt="image" height="100" /></span></a> </div>钩子来创建状态，并为组件中的所有副作用（例如Fetch API调用）使用useState钩子。

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

useEffect

通过此更改，您将可以直接使用let [users, setUsers] = React.useState([])变量而不是users来访问用户状态，这非常简单。另外，现在要更新状态，您将使用新功能this.state.users，它将为您更新状态，然后重新呈现组件。您可以在React useState hook

中了解有关此钩子的更多信息

组件的第二个更改是将Fetch API调用从已安装的组件移到setUsers钩子上。

useEffect

请注意第二个参数如何为空数组，这只是告诉React这个React.useEffect(() => { fetch('/users') .then(res => res.json()) .then(users => this.setUsers(users)); }, [])钩子只需要运行一次（即首先渲染此组件，或者您可以说何时）的方式此组件已安装）。 React在每次渲染后都运行所有useEffect钩子，因此这非常重要。您可以在Skipping Effects

中了解更多信息

现在，您的组件将更像：

useEffect

如何将此React类组件转换为功能组件

3 个答案: