Question

我是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;

Answer 1

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

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

替换为：

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

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

1 个答案: