时间戳

首页 > 解决方案 > Reactjs - 使用钩子将类组件转换为功能性组件

reactjs - Reactjs - 使用钩子将类组件转换为功能性组件

问题描述

我是 Reactjs 的新手。我正在关注 React 在线教程，并决定将任何类组件转换为功能性组件以练习钩子。我已经做了一些非常基本的，现在我坚持下去了。下面的第一类工作正常。我翻译的下面的那个会产生一个错误，即 monsters.map 不是函数。请指教。

import React from 'react';
import './App.css';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      monsters: []
    };
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => this.setState({monsters: users}));
  }

  render() {
    return (
      <div className="App">
        {
          this.state.monsters.map(monster => <h1 key={monster.id}>{monster.name}</h1>)
        }
      </div>
    )
  }

}

export default App;

以下是我转换为功能组件的过程：

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


function AppFn() {
  const [monsters, setMonster] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(users => setMonster({monsters: users}));
  },[]);

  return(
    <div className="App funct">
        {
          monsters.map(monster => <h1 key={monster.id}>{monster.name}</h1>)
        }
      </div>
  )
}

export default AppFn;

标签： reactjs

解决方案

Array#map仅适用于数组，而您实际上正在做的是将monsters数组作为对象中的字段传递。

.then(users => setMonster({monsters: users}));

将其替换为：

.then(users => setMonster(users));

推荐阅读